<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>JavaScript知识点回顾 | Hexo</title>
  <script src="/js/jQuery.md5.js"></script>
  <script>
    
    (function(){
      localStorage.setItem('userinfo',hex_md5('123chen'))
      
      var localData = localStorage.getItem("userinfo");
      // var localState = localStorage.getItem("state");
        if(localStorage.getItem("state") === null){
          var reason = window.prompt('请输入访问密码');
          // var promptVal = window.prompt('请输入访问密码');
          if(reason){
              //填写内容并“确定”
              var md5Prompt = hex_md5(reason)
              //点击的是“确定” 
              if (localData !== md5Prompt){
                alert('密码错误！');
                // history.back();
                location.replace(location.href); 
              }else{
                // alert('0123');
                localStorage.setItem('state',"1")
              }
          }
          else if(reason === ""){
              //未填写但“确定”
              location.replace(location.href); 
          }
          else{
            //“取消”事件
            location.replace(location.href); 
          }
        }

    })();
  </script>
 <link rel="alternate" href="/atom.xml" data="123chen" type="application/atom+xml">
  <meta name="description" content="JavaScript知识点回顾对象对象使用和属性JavaScript 中所有变量都可以当作对象使用，除了两个例外 null 和 undefined。 123456false.toString(); &#x2F;&#x2F; &#39;false&#39;[1, 2, 3].toString(); &#x2F;&#x2F; &#39;1,2,3&#39;function Foo()&amp;#123;&amp;#125;Foo.bar &#x3D; 1;Foo.bar; &#x2F;&#x2F; 1       闭">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript知识点回顾">
<meta property="og:url" content="http://yoursite.com/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/index.html">
<meta property="og:site_name" content="学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己，“学而不厌”，对人家，“诲人不倦”，我们应取这种态度。">
<meta property="og:description" content="JavaScript知识点回顾对象对象使用和属性JavaScript 中所有变量都可以当作对象使用，除了两个例外 null 和 undefined。 123456false.toString(); &#x2F;&#x2F; &#39;false&#39;[1, 2, 3].toString(); &#x2F;&#x2F; &#39;1,2,3&#39;function Foo()&amp;#123;&amp;#125;Foo.bar &#x3D; 1;Foo.bar; &#x2F;&#x2F; 1       闭">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-03-25T01:12:57.000Z">
<meta property="article:modified_time" content="2020-04-02T13:56:39.520Z">
<meta property="article:author" content="溟海">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="http://yoursite.com/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/index.html">
  
    <link rel="alternate" href="/atom.xml" title="学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己，“学而不厌”，对人家，“诲人不倦”，我们应取这种态度。" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 4.2.0"></head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/chen08" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">溟海</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Web Developer &amp; Designer</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Guangzhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="Type something..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
          <!-- . -->
        
        
          <li class="menu-item menu-item-home">
            <a href="/.">
              
              <i class="icon icon-home-fill"></i>
              
              <span class="menu-title">Home</span>
            </a>
          </li>
        


        
          <!-- archives -->
        
        
          <li class="menu-item menu-item-archives">
            <a href="/archives">
              
              <i class="icon icon-archives-fill"></i>
              
              <span class="menu-title">Archives</span>
            </a>
          </li>
        


        
          <!-- categories -->
        
        
          <li class="menu-item menu-item-categories">
            <a href="/categories">
              
              <i class="icon icon-folder"></i>
              
              <span class="menu-title">Categories</span>
            </a>
          </li>
        


        
          <!-- tags -->
        
        
          <li class="menu-item menu-item-tags">
            <a href="/tags">
              
              <i class="icon icon-tags"></i>
              
              <span class="menu-title">Tags</span>
            </a>
          </li>
        


        
          <!-- repository -->
        
        
          <li class="menu-item menu-item-repository">
            <a href="/repository">
              
              <i class="icon icon-project"></i>
              
              <span class="menu-title">Repository</span>
            </a>
          </li>
        


        
          <!-- books -->
        
        
          <li class="menu-item menu-item-books">
            <a href="/books">
              
              <i class="icon icon-book-fill"></i>
              
              <span class="menu-title">Books</span>
            </a>
          </li>
        


        
          <!-- links -->
        
        
          <li class="menu-item menu-item-links">
            <a href="/links">
              
              <i class="icon icon-friendship"></i>
              
              <span class="menu-title">Links</span>
            </a>
          </li>
        


        
          <!-- about -->
        
        
          <li class="menu-item menu-item-about">
            <a href="/about">
              
              <i class="icon icon-cup-fill"></i>
              
              <span class="menu-title">About</span>
            </a>
          </li>
        


        
          <!-- navigation/webstack/index.html -->
        
        
          <li class="menu-item menu-item-navigation">
            <a href="/navigation/webstack/index.html">
              
              <i class="icon icon-delicious"></i>
              
              <span class="menu-title">Navigation</span>
            </a>
          </li>
        


        
          <!-- navigation/webstack/word.html -->
        
        
          <li style="display: none;" class="menu-item menu-item-fixed">
            <a href="/navigation/webstack/word.html">
              
              <i class="icon icon-delicious"></i>
              
              <span class="menu-title">menu.fixed</span>
            </a>
          </li>
        


        
      </ul>

      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">Categories</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/1-WEB%E5%89%8D%E7%AB%AF/">1.WEB前端</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/2-%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/">2.编程语言</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/3-%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1/">3.产品设计</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/4-%E7%AE%A1%E7%90%86%E8%90%A5%E9%94%80/">4.管理营销</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/6-%E8%AF%BB%E4%B9%A6%E6%80%BB%E7%BB%93/">6.读书总结</a><span class="category-list-count">8</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tags</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a><span class="tag-list-count">15</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag">JavaScript设计模式</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Office/" rel="tag">Office</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/PHP/" rel="tag">PHP</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%86%99%E4%BD%9C/" rel="tag">写作</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%9F%BA%E9%87%91/" rel="tag">基金</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%AD%A6%E4%B9%A0/" rel="tag">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%B7%A5%E4%BD%9C/" rel="tag">工作</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%80%9D%E8%80%83/" rel="tag">思考</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%B8%85%E5%8D%95/" rel="tag">清单</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%9B%AE%E6%A0%87/" rel="tag">目标</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%BB%83%E4%B9%A0/" rel="tag">练习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%8B%B1%E8%AF%AD/" rel="tag">英语</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AE%A1%E5%88%92/" rel="tag">计划</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AF%AD%E6%B3%95/" rel="tag">语法</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/JavaScript/" style="font-size: 14px;">JavaScript</a> <a href="/tags/JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 13px;">JavaScript设计模式</a> <a href="/tags/Office/" style="font-size: 13.33px;">Office</a> <a href="/tags/PHP/" style="font-size: 13.33px;">PHP</a> <a href="/tags/%E5%86%99%E4%BD%9C/" style="font-size: 13.17px;">写作</a> <a href="/tags/%E5%9F%BA%E9%87%91/" style="font-size: 13.17px;">基金</a> <a href="/tags/%E5%AD%A6%E4%B9%A0/" style="font-size: 13px;">学习</a> <a href="/tags/%E5%B7%A5%E4%BD%9C/" style="font-size: 13px;">工作</a> <a href="/tags/%E6%80%9D%E8%80%83/" style="font-size: 13px;">思考</a> <a href="/tags/%E6%B8%85%E5%8D%95/" style="font-size: 13px;">清单</a> <a href="/tags/%E7%9B%AE%E6%A0%87/" style="font-size: 13px;">目标</a> <a href="/tags/%E7%BB%83%E4%B9%A0/" style="font-size: 13px;">练习</a> <a href="/tags/%E8%8B%B1%E8%AF%AD/" style="font-size: 13.67px;">英语</a> <a href="/tags/%E8%AE%A1%E5%88%92/" style="font-size: 13.17px;">计划</a> <a href="/tags/%E8%AF%AD%E6%B3%95/" style="font-size: 13.5px;">语法</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 13.83px;">随笔</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 13px;">面试</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">Archive</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/20120/04/">April 20120</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/20120/03/">March 20120</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">May 2020</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">April 2020</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">March 2020</a><span class="archive-list-count">14</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a><span class="archive-list-count">10</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/21/05/fund/%E5%9F%BA%E9%87%91%E5%9F%BA%E7%A1%80/" class="title">基金基础</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-21T01:12:57.000Z" itemprop="datePublished">20120-04-21</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/21/05/study/%E5%AD%A6%E4%B9%A0/" class="title">学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-21T01:12:57.000Z" itemprop="datePublished">20120-04-21</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/13/05/%E4%BB%8A%E6%97%A5%E8%AE%A1%E5%88%92/" class="title">今日计划</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-13T01:12:57.000Z" itemprop="datePublished">20120-04-13</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/03/05/office/Excel%E5%AD%A6%E4%B9%A0/" class="title">Excel学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-03T01:12:57.000Z" itemprop="datePublished">20120-04-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/03/05/office/PPT%E5%AD%A6%E4%B9%A0/" class="title">PPT学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-03T01:12:57.000Z" itemprop="datePublished">20120-04-03</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <span class="toggle-btn-absolute">
    <a class="toggle-btn" data-toggle="collapse" href="#collapseToc" aria-expanded="true" title="Catalogue" role="button">
      <i class="text-in icon icon-close"></i>
    </a>
  </span>
  <div class="slimContent">
    <nav id="toc" class="article-toc">
      <h3 class="toc-title">Catalogue</h3>
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript知识点回顾"><span class="toc-number">1.</span> <span class="toc-text">JavaScript知识点回顾</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#对象"><span class="toc-number">1.0.1.</span> <span class="toc-text">对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#闭包"><span class="toc-number">1.0.2.</span> <span class="toc-text">闭包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数"><span class="toc-number">1.0.3.</span> <span class="toc-text">函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript面试题练习"><span class="toc-number">1.0.4.</span> <span class="toc-text">JavaScript面试题练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript理解"><span class="toc-number">1.0.5.</span> <span class="toc-text">JavaScript理解</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#后盾网JavaScript培训"><span class="toc-number">1.1.</span> <span class="toc-text">后盾网JavaScript培训</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript变量"><span class="toc-number">1.1.1.</span> <span class="toc-text">javascript变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript命名规范"><span class="toc-number">1.1.2.</span> <span class="toc-text">javascript命名规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#声明变量注意的问题"><span class="toc-number">1.1.3.</span> <span class="toc-text">声明变量注意的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript中的数据类型"><span class="toc-number">1.1.4.</span> <span class="toc-text">javascript中的数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#初始类型-String类型"><span class="toc-number">1.1.5.</span> <span class="toc-text">初始类型-String类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#初始类型-Number类型"><span class="toc-number">1.1.6.</span> <span class="toc-text">初始类型-Number类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#初始类型-null"><span class="toc-number">1.1.7.</span> <span class="toc-text">初始类型- null</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#初始类型-Undefined"><span class="toc-number">1.1.8.</span> <span class="toc-text">初始类型- Undefined</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象类型"><span class="toc-number">1.1.9.</span> <span class="toc-text">对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript运算符"><span class="toc-number">1.1.10.</span> <span class="toc-text">javascript运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#算数运算符"><span class="toc-number">1.1.10.1.</span> <span class="toc-text">算数运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#关系运算符-比较运算符"><span class="toc-number">1.1.10.2.</span> <span class="toc-text">关系运算符(比较运算符)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#关系运算符-比较运算符-注意"><span class="toc-number">1.1.10.3.</span> <span class="toc-text">关系运算符(比较运算符)注意</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#赋值运算符"><span class="toc-number">1.1.10.4.</span> <span class="toc-text">赋值运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#逻辑运算符"><span class="toc-number">1.1.10.5.</span> <span class="toc-text">逻辑运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#逻辑运算符注意"><span class="toc-number">1.1.10.6.</span> <span class="toc-text">逻辑运算符注意</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#三元运算符"><span class="toc-number">1.1.10.7.</span> <span class="toc-text">三元运算符</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript流程控制"><span class="toc-number">1.1.11.</span> <span class="toc-text">javascript流程控制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#选择结构-分支结构、条件结构"><span class="toc-number">1.1.12.</span> <span class="toc-text">选择结构(分支结构、条件结构)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#分支结构注意事项"><span class="toc-number">1.1.13.</span> <span class="toc-text">分支结构注意事项</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#循环结构"><span class="toc-number">1.1.14.</span> <span class="toc-text">循环结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#循环结构注意问题"><span class="toc-number">1.1.15.</span> <span class="toc-text">循环结构注意问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#循环结构中的跳转语句"><span class="toc-number">1.1.16.</span> <span class="toc-text">循环结构中的跳转语句</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript函数"><span class="toc-number">1.1.17.</span> <span class="toc-text">javascript函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数的声明方式-创建"><span class="toc-number">1.1.18.</span> <span class="toc-text">函数的声明方式(创建)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数的调用方式"><span class="toc-number">1.1.19.</span> <span class="toc-text">函数的调用方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#带有参数的函数"><span class="toc-number">1.1.20.</span> <span class="toc-text">带有参数的函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数的返回值"><span class="toc-number">1.1.21.</span> <span class="toc-text">函数的返回值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量的作用域"><span class="toc-number">1.1.22.</span> <span class="toc-text">变量的作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript-内置顶层函数"><span class="toc-number">1.1.23.</span> <span class="toc-text">javascript 内置顶层函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#转换成数值类型"><span class="toc-number">1.1.24.</span> <span class="toc-text">转换成数值类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#转换成数值类型-1"><span class="toc-number">1.1.25.</span> <span class="toc-text">转换成数值类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#转换成数值类型-2"><span class="toc-number">1.1.26.</span> <span class="toc-text">转换成数值类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#isNaN"><span class="toc-number">1.1.27.</span> <span class="toc-text">isNaN()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#eval"><span class="toc-number">1.1.28.</span> <span class="toc-text">eval()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript数组"><span class="toc-number">1.1.29.</span> <span class="toc-text">JavaScript数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#声明-创建-数组"><span class="toc-number">1.1.30.</span> <span class="toc-text">声明(创建)数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#遍历数组的方式"><span class="toc-number">1.1.31.</span> <span class="toc-text">遍历数组的方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#访问-操作-数组"><span class="toc-number">1.1.32.</span> <span class="toc-text">访问(操作)数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组的维度"><span class="toc-number">1.1.33.</span> <span class="toc-text">数组的维度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习"><span class="toc-number">1.1.34.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript对象"><span class="toc-number">1.1.35.</span> <span class="toc-text">javascript对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建-声明-对象"><span class="toc-number">1.1.36.</span> <span class="toc-text">创建(声明)对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#添加属性和方法"><span class="toc-number">1.1.37.</span> <span class="toc-text">添加属性和方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#访问对象的属性和方法"><span class="toc-number">1.1.38.</span> <span class="toc-text">访问对象的属性和方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#删除对象的属性"><span class="toc-number">1.1.39.</span> <span class="toc-text">删除对象的属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascrit数组对象"><span class="toc-number">1.1.40.</span> <span class="toc-text">javascrit数组对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-1"><span class="toc-number">1.1.41.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript字符串对象"><span class="toc-number">1.1.42.</span> <span class="toc-text">javascript字符串对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-2"><span class="toc-number">1.1.43.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript-Math对象"><span class="toc-number">1.1.44.</span> <span class="toc-text">javascript Math对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-3"><span class="toc-number">1.1.45.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览器对象模型-BOM"><span class="toc-number">1.1.46.</span> <span class="toc-text">浏览器对象模型-BOM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#window对象"><span class="toc-number">1.1.47.</span> <span class="toc-text">window对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#定时器函数"><span class="toc-number">1.1.48.</span> <span class="toc-text">定时器函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#history对象"><span class="toc-number">1.1.49.</span> <span class="toc-text">history对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-4"><span class="toc-number">1.1.50.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript事件"><span class="toc-number">1.1.51.</span> <span class="toc-text">javascript事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript—DOM"><span class="toc-number">1.1.52.</span> <span class="toc-text">javascript—DOM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对元素内容的操作"><span class="toc-number">1.1.53.</span> <span class="toc-text">对元素内容的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对样式的操作"><span class="toc-number">1.1.54.</span> <span class="toc-text">对样式的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#想一想"><span class="toc-number">1.1.55.</span> <span class="toc-text">想一想</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-模型-model"><span class="toc-number">1.1.56.</span> <span class="toc-text">DOM 模型(model)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#节点"><span class="toc-number">1.1.57.</span> <span class="toc-text">节点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#节点的属性"><span class="toc-number">1.1.58.</span> <span class="toc-text">节点的属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#节点的方法"><span class="toc-number">1.1.59.</span> <span class="toc-text">节点的方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-5"><span class="toc-number">1.1.60.</span> <span class="toc-text">小练习</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得元素的位置"><span class="toc-number">1.1.61.</span> <span class="toc-text">获得元素的位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#关于元素尺寸的属性"><span class="toc-number">1.1.62.</span> <span class="toc-text">关于元素尺寸的属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得元素的滚动条位置"><span class="toc-number">1.1.63.</span> <span class="toc-text">获得元素的滚动条位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件对象"><span class="toc-number">1.1.64.</span> <span class="toc-text">事件对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件对象的属性"><span class="toc-number">1.1.65.</span> <span class="toc-text">事件对象的属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件流"><span class="toc-number">1.1.66.</span> <span class="toc-text">事件流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javascript日期对象"><span class="toc-number">1.1.67.</span> <span class="toc-text">javascript日期对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小练习-6"><span class="toc-number">1.1.68.</span> <span class="toc-text">小练习</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript后盾网实战"><span class="toc-number">1.2.</span> <span class="toc-text">JavaScript后盾网实战</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#输出工具"><span class="toc-number">1.2.1.</span> <span class="toc-text">输出工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#分号的使用"><span class="toc-number">1.2.2.</span> <span class="toc-text">分号的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量的创建"><span class="toc-number">1.2.3.</span> <span class="toc-text">变量的创建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-命名规范"><span class="toc-number">1.2.4.</span> <span class="toc-text">js 命名规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量重复声明"><span class="toc-number">1.2.5.</span> <span class="toc-text">变量重复声明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据类型"><span class="toc-number">1.2.6.</span> <span class="toc-text">数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串拼接"><span class="toc-number">1.2.7.</span> <span class="toc-text">字符串拼接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#算术运算符"><span class="toc-number">1.2.8.</span> <span class="toc-text">算术运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#"><span class="toc-number">1.2.9.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#关系运算符"><span class="toc-number">1.2.10.</span> <span class="toc-text">关系运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#逻辑运算符-1"><span class="toc-number">1.2.11.</span> <span class="toc-text">逻辑运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#赋值运算符-1"><span class="toc-number">1.2.12.</span> <span class="toc-text">赋值运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三元运算符-1"><span class="toc-number">1.2.13.</span> <span class="toc-text">三元运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#if"><span class="toc-number">1.2.14.</span> <span class="toc-text">if</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#switch"><span class="toc-number">1.2.15.</span> <span class="toc-text">switch</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#自定义运算"><span class="toc-number">1.2.16.</span> <span class="toc-text">自定义运算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#for循环"><span class="toc-number">1.2.17.</span> <span class="toc-text">for循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#双层for循环"><span class="toc-number">1.2.18.</span> <span class="toc-text">双层for循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#直角三角形效果"><span class="toc-number">1.2.19.</span> <span class="toc-text">直角三角形效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#九九乘法表"><span class="toc-number">1.2.20.</span> <span class="toc-text">九九乘法表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#金字塔效果"><span class="toc-number">1.2.21.</span> <span class="toc-text">金字塔效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#自定义行列数的隔行变色表格"><span class="toc-number">1.2.22.</span> <span class="toc-text">自定义行列数的隔行变色表格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#while循环"><span class="toc-number">1.2.23.</span> <span class="toc-text">while循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#do-whild循环"><span class="toc-number">1.2.24.</span> <span class="toc-text">do whild循环</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#break和continue"><span class="toc-number">1.2.25.</span> <span class="toc-text">break和continue</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#函数-1"><span class="toc-number">1.2.26.</span> <span class="toc-text">函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#带参数的函数1"><span class="toc-number">1.2.27.</span> <span class="toc-text">带参数的函数1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#带参数的函数2"><span class="toc-number">1.2.28.</span> <span class="toc-text">带参数的函数2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#return"><span class="toc-number">1.2.29.</span> <span class="toc-text">return</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#return-2"><span class="toc-number">1.2.30.</span> <span class="toc-text">return 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#变量作用域"><span class="toc-number">1.2.31.</span> <span class="toc-text">变量作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Number"><span class="toc-number">1.2.32.</span> <span class="toc-text">Number</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#parseFloat"><span class="toc-number">1.2.33.</span> <span class="toc-text">parseFloat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#parseInt"><span class="toc-number">1.2.34.</span> <span class="toc-text">parseInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#isNaN-1"><span class="toc-number">1.2.35.</span> <span class="toc-text">isNaN</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#eval-1"><span class="toc-number">1.2.36.</span> <span class="toc-text">eval</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#自定义运行"><span class="toc-number">1.2.37.</span> <span class="toc-text">自定义运行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组"><span class="toc-number">1.2.38.</span> <span class="toc-text">数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组特点"><span class="toc-number">1.2.39.</span> <span class="toc-text">数组特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组遍历"><span class="toc-number">1.2.40.</span> <span class="toc-text">数组遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二维数组"><span class="toc-number">1.2.41.</span> <span class="toc-text">二维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二维数组-1"><span class="toc-number">1.2.42.</span> <span class="toc-text">二维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#取数组最大值"><span class="toc-number">1.2.43.</span> <span class="toc-text">取数组最大值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得最长的二维数组子数组的序号"><span class="toc-number">1.2.44.</span> <span class="toc-text">获得最长的二维数组子数组的序号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象-1"><span class="toc-number">1.2.45.</span> <span class="toc-text">对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#构造函数创建对象"><span class="toc-number">1.2.46.</span> <span class="toc-text">构造函数创建对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#对象属性和方法的获得"><span class="toc-number">1.2.47.</span> <span class="toc-text">对象属性和方法的获得</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#遍历对象"><span class="toc-number">1.2.48.</span> <span class="toc-text">遍历对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#删除对象属性或方法"><span class="toc-number">1.2.49.</span> <span class="toc-text">删除对象属性或方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组对象splice"><span class="toc-number">1.2.50.</span> <span class="toc-text">数组对象splice</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组对象-1"><span class="toc-number">1.2.51.</span> <span class="toc-text">数组对象 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组对象-2"><span class="toc-number">1.2.52.</span> <span class="toc-text">数组对象 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组对象-3"><span class="toc-number">1.2.53.</span> <span class="toc-text">数组对象 3</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组对象-4"><span class="toc-number">1.2.54.</span> <span class="toc-text">数组对象 4</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组去重复效果-1"><span class="toc-number">1.2.55.</span> <span class="toc-text">数组去重复效果 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组去重复效果-2"><span class="toc-number">1.2.56.</span> <span class="toc-text">数组去重复效果 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串类型"><span class="toc-number">1.2.57.</span> <span class="toc-text">字符串类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-1"><span class="toc-number">1.2.58.</span> <span class="toc-text">字符串对象 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-2"><span class="toc-number">1.2.59.</span> <span class="toc-text">字符串对象 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-3"><span class="toc-number">1.2.60.</span> <span class="toc-text">字符串对象 3</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-4"><span class="toc-number">1.2.61.</span> <span class="toc-text">字符串对象 4</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-5"><span class="toc-number">1.2.62.</span> <span class="toc-text">字符串对象 5</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串对象-6"><span class="toc-number">1.2.63.</span> <span class="toc-text">字符串对象 6</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#查找字符串位置"><span class="toc-number">1.2.64.</span> <span class="toc-text">查找字符串位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数字对象"><span class="toc-number">1.2.65.</span> <span class="toc-text">数字对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#随机数"><span class="toc-number">1.2.66.</span> <span class="toc-text">随机数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#随机点菜-1"><span class="toc-number">1.2.67.</span> <span class="toc-text">随机点菜 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#随机点菜-2"><span class="toc-number">1.2.68.</span> <span class="toc-text">随机点菜 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BOM"><span class="toc-number">1.2.69.</span> <span class="toc-text">BOM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#confirm"><span class="toc-number">1.2.70.</span> <span class="toc-text">confirm</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#定时器"><span class="toc-number">1.2.71.</span> <span class="toc-text">定时器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#清理定时器"><span class="toc-number">1.2.72.</span> <span class="toc-text">清理定时器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件"><span class="toc-number">1.2.73.</span> <span class="toc-text">事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件-1"><span class="toc-number">1.2.74.</span> <span class="toc-text">事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得和设置行内样式"><span class="toc-number">1.2.75.</span> <span class="toc-text">获得和设置行内样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#元素样式变化"><span class="toc-number">1.2.76.</span> <span class="toc-text">元素样式变化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#运动的基本原理"><span class="toc-number">1.2.77.</span> <span class="toc-text">运动的基本原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#元素向右运动"><span class="toc-number">1.2.78.</span> <span class="toc-text">元素向右运动</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#运动的停止-1"><span class="toc-number">1.2.79.</span> <span class="toc-text">运动的停止 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#运动的停止-2"><span class="toc-number">1.2.80.</span> <span class="toc-text">运动的停止 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#加速跑"><span class="toc-number">1.2.81.</span> <span class="toc-text">加速跑</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#元素自动显隐"><span class="toc-number">1.2.82.</span> <span class="toc-text">元素自动显隐</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#折返跑"><span class="toc-number">1.2.83.</span> <span class="toc-text">折返跑</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#鼠标事件"><span class="toc-number">1.2.84.</span> <span class="toc-text">鼠标事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dom"><span class="toc-number">1.2.85.</span> <span class="toc-text">dom</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#dom获得元素的几种方法"><span class="toc-number">1.2.86.</span> <span class="toc-text">dom获得元素的几种方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-1"><span class="toc-number">1.2.87.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#设置元素内容"><span class="toc-number">1.2.88.</span> <span class="toc-text">设置元素内容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#倒计时跳转"><span class="toc-number">1.2.89.</span> <span class="toc-text">倒计时跳转</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#乾坤大挪移"><span class="toc-number">1.2.90.</span> <span class="toc-text">乾坤大挪移</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#乾坤大挪移-2"><span class="toc-number">1.2.91.</span> <span class="toc-text">乾坤大挪移 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#操作元素属性"><span class="toc-number">1.2.92.</span> <span class="toc-text">操作元素属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#操作元素属性任意性"><span class="toc-number">1.2.93.</span> <span class="toc-text">操作元素属性任意性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实际作用在元素身上的样式"><span class="toc-number">1.2.94.</span> <span class="toc-text">实际作用在元素身上的样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#通过关系找元素"><span class="toc-number">1.2.95.</span> <span class="toc-text">通过关系找元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#节点方法"><span class="toc-number">1.2.96.</span> <span class="toc-text">节点方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获取元素位置"><span class="toc-number">1.2.97.</span> <span class="toc-text">获取元素位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获取元素位置-1"><span class="toc-number">1.2.98.</span> <span class="toc-text">获取元素位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得元素的尺寸"><span class="toc-number">1.2.99.</span> <span class="toc-text">获得元素的尺寸</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#获得元素的尺寸-1"><span class="toc-number">1.2.100.</span> <span class="toc-text">获得元素的尺寸</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-2"><span class="toc-number">1.2.101.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#滚动条元素滚动条的位置"><span class="toc-number">1.2.102.</span> <span class="toc-text">滚动条元素滚动条的位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-3"><span class="toc-number">1.2.103.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-4"><span class="toc-number">1.2.104.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#tab切换效果"><span class="toc-number">1.2.105.</span> <span class="toc-text">tab切换效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#键盘事件和事件对象-1"><span class="toc-number">1.2.106.</span> <span class="toc-text">键盘事件和事件对象 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#键盘事件和事件对象-2"><span class="toc-number">1.2.107.</span> <span class="toc-text">键盘事件和事件对象 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#键盘事件和事件对象-3"><span class="toc-number">1.2.108.</span> <span class="toc-text">键盘事件和事件对象 3</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#键盘事件和事件对象-4"><span class="toc-number">1.2.109.</span> <span class="toc-text">键盘事件和事件对象 4</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#打字游戏原理"><span class="toc-number">1.2.110.</span> <span class="toc-text">打字游戏原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#表单事件-1"><span class="toc-number">1.2.111.</span> <span class="toc-text">表单事件 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#表单事件-2"><span class="toc-number">1.2.112.</span> <span class="toc-text">表单事件 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件流-1"><span class="toc-number">1.2.113.</span> <span class="toc-text">事件流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#阻止a标签跳转"><span class="toc-number">1.2.114.</span> <span class="toc-text">阻止a标签跳转</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this"><span class="toc-number">1.2.115.</span> <span class="toc-text">this</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#圆角"><span class="toc-number">1.2.116.</span> <span class="toc-text">圆角</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建日期"><span class="toc-number">1.2.117.</span> <span class="toc-text">创建日期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#当前时间"><span class="toc-number">1.2.118.</span> <span class="toc-text">当前时间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#倒计时效果-1"><span class="toc-number">1.2.119.</span> <span class="toc-text">倒计时效果 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#倒计时效果-2"><span class="toc-number">1.2.120.</span> <span class="toc-text">倒计时效果 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#递归函数"><span class="toc-number">1.2.121.</span> <span class="toc-text">递归函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-5"><span class="toc-number">1.2.122.</span> <span class="toc-text"></span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#-6"><span class="toc-number">1.2.123.</span> <span class="toc-text"></span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#107常用JavaScript语句"><span class="toc-number">2.</span> <span class="toc-text">107常用JavaScript语句</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#字符串追加连接符"><span class="toc-number">3.</span> <span class="toc-text">字符串追加连接符 : </span></a></li></ol>
    </nav>
  </div>
</aside>

<main class="main" role="main">
  <!-- 引入百度的思维导图库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script>
<script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
<!-- 引入百度的思维导图库 -->
<div class="content">
  <article id="post-01/JavaScript知识点回顾" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript知识点回顾
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/" class="article-date">
	  <time datetime="2020-03-25T01:12:57.000Z" itemprop="datePublished">2020-03-25</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/1-WEB%E5%89%8D%E7%AB%AF/">1.WEB前端</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>
  </span>


        

	<span class="article-read hidden-xs">
    	<i class="icon icon-eye-fill" aria-hidden="true"></i>
    	<span id="/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/" class="leancloud_visitors"  data-flag-title="JavaScript知识点回顾">0</span>
    </span>

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/#comments" class="article-comment-link">Comments</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 24.9k(words)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 107(minutes)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h1 id="JavaScript知识点回顾"><a href="#JavaScript知识点回顾" class="headerlink" title="JavaScript知识点回顾"></a>JavaScript知识点回顾</h1><h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><p>对象使用和属性<br>JavaScript 中所有变量都可以当作对象使用，除了两个例外 null 和 undefined。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span>.toString(); <span class="comment">// 'false'</span></span><br><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].toString(); <span class="comment">// '1,2,3'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">Foo.bar = <span class="number">1</span>;</span><br><span class="line">Foo.bar; <span class="comment">// 1</span></span><br></pre></td></tr></table></figure>






<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//插件</span></span><br><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params">global,undefined</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> plugin = &#123;</span><br><span class="line">        add: <span class="function"><span class="keyword">function</span>(<span class="params">n1,n2</span>)</span>&#123;&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 最后将插件对象暴露给全局对象</span></span><br><span class="line">    <span class="string">'plugin'</span> <span class="keyword">in</span> global &amp;&amp; global.plugin = plugin;</span><br><span class="line">&#125;)(<span class="built_in">window</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//分解上面源码</span></span><br><span class="line"><span class="comment">// 自执行函数定义：</span></span><br><span class="line"><span class="comment">// 写法一  格式：(函数)(实参)</span></span><br><span class="line">  (<span class="function"><span class="keyword">function</span> (<span class="params">n1,n2</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是匿名函数的自执行的第一种写法，结果为:"</span>+(n1+n2))</span><br><span class="line">  &#125;)(<span class="number">10</span>,<span class="number">100</span>)<span class="comment">//110</span></span><br><span class="line"></span><br><span class="line">  (<span class="function"><span class="keyword">function</span> <span class="title">start</span>(<span class="params">n1,n2</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是函数声明方式的自执行的第一种写法，结果为:"</span>+(n1+n2))</span><br><span class="line">  &#125;)(<span class="number">10</span>,<span class="number">100</span>)<span class="comment">//110</span></span><br><span class="line"><span class="comment">//写法二 格式：(函数(实参))如下</span></span><br><span class="line">  (<span class="function"><span class="keyword">function</span> (<span class="params">n1,n2</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是匿名函数的自执行的第二种写法，结果为："</span>+(n1+n2))</span><br><span class="line">  &#125;(<span class="number">10</span>,<span class="number">100</span>))<span class="comment">//110</span></span><br><span class="line"></span><br><span class="line">  (<span class="function"><span class="keyword">function</span> <span class="title">start</span>(<span class="params">n1,n2</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"这是函数声明方式的自执行的第二种写法，结果为："</span>+(n1+n2))</span><br><span class="line">  &#125;(<span class="number">10</span>,<span class="number">100</span>))<span class="comment">//110</span></span><br><span class="line"></span><br><span class="line">  (<span class="function"><span class="keyword">function</span> (<span class="params">形参</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">"函数"</span>);</span><br><span class="line">  &#125;)(实参);</span><br></pre></td></tr></table></figure>

<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 函数的声明与执行</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明函数fun0</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun0</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"fun0"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//执行函数fun0</span></span><br><span class="line">fun0(); <span class="comment">// fun0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明函数fun1 - 变量方式</span></span><br><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"fun1"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行函数fun1</span></span><br><span class="line">fun1(); <span class="comment">// fun1</span></span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">形参</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"函数"</span>);</span><br><span class="line">&#125;)(实参);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun3</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"fun3"</span>);</span><br><span class="line">&#125;(<span class="number">1</span>);  <span class="comment">//如果不传实参则报错</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun3</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"fun3"</span>);</span><br><span class="line">&#125;</span><br><span class="line">(<span class="number">1</span>);</span><br><span class="line"><span class="comment">// 若此处执行fun3函数，可以输出结果</span></span><br><span class="line">fun3(); <span class="comment">//"fun3" //JavaScript在程序跑会自动去掉空格跟回车</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//除了上面()小括弧可以把function关键字作为函数声明的含义转换成函数表达式外，</span></span><br><span class="line"><span class="comment">//JavaScript的&amp;&amp; 与操作、||或操作、,逗号等操作符也有这个效果。</span></span><br><span class="line"></span><br><span class="line"><span class="literal">true</span> &amp;&amp; <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"true &amp;&amp;"</span>) &#125; (); <span class="comment">// "true &amp;&amp;"</span></span><br><span class="line"><span class="literal">false</span> || <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"true ||"</span>) &#125; (); <span class="comment">// "true ||"</span></span><br><span class="line"><span class="number">0</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"0,"</span>) &#125; (); <span class="comment">// "0,"</span></span><br><span class="line"><span class="comment">// 此处要注意： &amp;&amp;, || 的短路效应。即： false &amp;&amp; (表达式1)  是不会触发表达式1；</span></span><br><span class="line"><span class="comment">// 同理，true || (表达式2) 不会触发表达式2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果不在意返回值，也不在意代码的可读性，</span></span><br><span class="line"><span class="comment">//我们甚至还可以使用一元操作符（! ~ - + ），函数同样也会立即执行。</span></span><br><span class="line">!<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"!"</span>); &#125; (); <span class="comment">//"!"</span></span><br><span class="line">~<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"~"</span>); &#125; (); <span class="comment">//"~"</span></span><br><span class="line">-<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"-"</span>); &#125; (); <span class="comment">//"-"</span></span><br><span class="line">+<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"+"</span>); &#125; (); <span class="comment">//"+"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//同上</span></span><br><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">";"</span>); </span><br><span class="line">&#125;)(<span class="built_in">window</span>) <span class="comment">//";"</span></span><br><span class="line">!(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"!"</span>); </span><br><span class="line">&#125;)(<span class="built_in">window</span>); <span class="comment">//"!"</span></span><br><span class="line">~(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"~"</span>);</span><br><span class="line">&#125;)(<span class="built_in">window</span>); <span class="comment">//"~"</span></span><br><span class="line">-(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"-"</span>);</span><br><span class="line">&#125;)(<span class="built_in">window</span>); <span class="comment">//"-"</span></span><br><span class="line">+(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"+"</span>);</span><br><span class="line">&#125;)(<span class="built_in">window</span>); <span class="comment">//"+"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 甚至还可以使用new关键字：</span></span><br><span class="line"><span class="comment">// 注意：采用new方式，可以不要再解释花括弧 `&#125;` 后面加小括弧 `()` </span></span><br><span class="line"><span class="keyword">new</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"new"</span>); &#125; <span class="comment">//"new"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果需要传递参数</span></span><br><span class="line"><span class="keyword">new</span> <span class="function"><span class="keyword">function</span> (<span class="params">a</span>) </span>&#123; <span class="built_in">console</span>.log(a); &#125; (<span class="string">"newwwwwwww"</span>); <span class="comment">//"newwwwwwww"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//最好玩的是赋值符号=同样也有此效用（例子中的i变量方式）：</span></span><br><span class="line"><span class="comment">//此处 要注意区分 i 和 j 不同之处。前者是函数自执行后返回值给 i ；后者是声明一个函数，函数名为 j 。</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"output i:"</span>); <span class="keyword">return</span> <span class="number">10</span>; &#125; (); <span class="comment">// "output i:"</span></span><br><span class="line"><span class="keyword">var</span> j = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"output j:"</span>); <span class="keyword">return</span> <span class="number">99</span>;&#125;</span><br><span class="line"><span class="built_in">console</span>.log(i); <span class="comment">// 10</span></span><br><span class="line"><span class="built_in">console</span>.log(j); <span class="comment">// ƒ () &#123; console.log("output j:"); return 99;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 上面提及到，要注意区分 var i和 var j 不同之处</span></span><br><span class="line"><span class="comment">// （前者是函数自执行后返回值给i ；后者是声明一个函数，函数名为j）。</span></span><br><span class="line"><span class="comment">// 如果是看代码，我们需要查看代码结尾是否有没有()才能区分。</span></span><br><span class="line"><span class="comment">// 一般为了方便开发人员阅读，我们会采用下面这种方式：</span></span><br><span class="line"><span class="keyword">var</span> i2 = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"output i2:"</span>); <span class="keyword">return</span> <span class="number">10</span>; &#125; ()); <span class="comment">// "output i2:"</span></span><br><span class="line"><span class="keyword">var</span> i3 = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">console</span>.log(<span class="string">"output i3:"</span>); <span class="keyword">return</span> <span class="number">10</span>; &#125;) (); <span class="comment">// "output i3:"</span></span><br><span class="line"><span class="comment">// 以上两种都可以，但依旧建议采用第一种 i2 的方式。（个人依旧喜欢第二种i3方式）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 自执行与立即执行</span></span><br><span class="line"><span class="comment">// 文中对 (function () &#123;/*code*/&#125; ) () 这种表达式，称作为 自执行匿名函数；</span></span><br><span class="line"><span class="comment">// 而参考的英文博文中作者更建议称它为 立即调用的函数表达式。</span></span><br><span class="line"><span class="comment">// 以下是截取该参考博文的例子</span></span><br><span class="line"><span class="comment">// 自执行函数。自己调用自己（递归）</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123; foo(); &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 自执行的匿名函数。</span></span><br><span class="line"><span class="keyword">var</span> foo = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">arguments</span>.callee(); &#125;; </span><br><span class="line"></span><br><span class="line"><span class="comment">// 立即执行匿名函数。但我们习惯称其为：自执行的匿名函数。</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="comment">/* code */</span> &#125; ());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 立即执行函数。加一个标示名称，可以方便Debug</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123; <span class="comment">/* code */</span> &#125; ());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; <span class="built_in">arguments</span>.callee(); &#125; ());</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123; foo(); &#125; ());</span><br></pre></td></tr></table></figure>



<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">demo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  alert(<span class="number">1</span>)</span><br><span class="line">&#125;)(<span class="keyword">this</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">//在add方法里声明一个局部变量counter,并赋值为0</span></span><br><span class="line">  <span class="keyword">var</span> counter = <span class="number">0</span>;  </span><br><span class="line">  <span class="comment">//counter += 1 可以理解为 counter = counter + 1;</span></span><br><span class="line">  <span class="keyword">return</span> counter += <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add(); <span class="comment">//执行add方法 </span></span><br><span class="line">add(); <span class="comment">//执行add方法 </span></span><br><span class="line">add(); <span class="comment">//执行add方法 </span></span><br><span class="line"><span class="comment">//每次执行都是重新赋值,并输出值,所以每次执行都一样</span></span><br><span class="line"><span class="comment">// 本意是想输出 3, 但事与愿违，输出的都是 1 !</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// ES5</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="function"><span class="keyword">function</span>(<span class="params">x, y</span>) </span>&#123;</span><br><span class="line">     <span class="keyword">return</span> x * y;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// (参数1, 参数2, …, 参数N) =&gt; &#123; 函数声明 &#125;</span></span><br><span class="line"><span class="comment">// (参数1, 参数2, …, 参数N) =&gt; 表达式(单一)</span></span><br><span class="line"><span class="comment">// 相当于：(参数1, 参数2, …, 参数N) =&gt;&#123; return 表达式; &#125;</span></span><br><span class="line"><span class="comment">// ES6</span></span><br><span class="line"><span class="keyword">const</span> x = <span class="function">(<span class="params">x, y</span>) =&gt;</span> x * y;</span><br><span class="line"><span class="comment">//当只有一个参数时，圆括号是可选的</span></span><br><span class="line"><span class="comment">// (单一参数) =&gt; &#123;函数声明&#125;</span></span><br><span class="line"><span class="comment">// 单一参数 =&gt; &#123;函数声明&#125;</span></span><br><span class="line"><span class="comment">// 没有参数的函数应该写成一对圆括号</span></span><br><span class="line">() =&gt; &#123;函数声明&#125;</span><br><span class="line"><span class="comment">// 有的箭头函数都没有自己的 this。 不适合顶一个 对象的方法。</span></span><br><span class="line"><span class="comment">// 当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，</span></span><br><span class="line"><span class="comment">// 所以在箭头函数中 this 的值和外层的 this 是一样的。</span></span><br><span class="line"><span class="comment">// 箭头函数是不能提升的，所以需要在使用之前定义。</span></span><br><span class="line"><span class="comment">// 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。</span></span><br><span class="line"><span class="comment">// 如果函数部分只是一个语句，则可以省略 return 关键字和大括号 &#123;&#125;，这样做是一个比较好的习惯:</span></span><br><span class="line"><span class="keyword">const</span> x = <span class="function">(<span class="params">x, y</span>) =&gt;</span> &#123; <span class="keyword">return</span> x * y &#125;;</span><br></pre></td></tr></table></figure>


<h3 id="JavaScript面试题练习"><a href="#JavaScript面试题练习" class="headerlink" title="JavaScript面试题练习"></a>JavaScript面试题练习</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> lowerCaseOnly =  <span class="regexp">/^[a-z]+$/</span>;</span><br><span class="line">[lowerCaseOnly.test(<span class="literal">null</span>), lowerCaseOnly.test()]</span><br><span class="line"></span><br><span class="line"><span class="comment">//答案：</span></span><br><span class="line"><span class="comment">//有关正则表达式</span></span><br><span class="line"><span class="comment">//test过程会将传入的变量自动转换为字符串 null-》"null",完全没有则会转换为"undefined"</span></span><br><span class="line"></span><br><span class="line"><span class="string">"1 2 3"</span>.replace(<span class="regexp">/\d/g</span>, <span class="built_in">parseInt</span>)</span><br><span class="line"><span class="comment">// 答案：</span></span><br><span class="line"><span class="comment">// replace的第二个函数如何传参，parseInt一共可以传几个参数，结果：1，NaN，3</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line"><span class="keyword">var</span> oldName = foo.name;</span><br><span class="line">foo.name = <span class="string">"bar"</span>;</span><br><span class="line">[oldName, foo.name]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 答案：</span></span><br><span class="line"><span class="comment">// 纠结点，变量声明会提升至当前块的顶端</span></span><br><span class="line"><span class="comment">// 那么属性赋值呢？其实上面的都是废话，坑根本不在这变量声明与属性赋值。</span></span><br><span class="line"><span class="comment">// 函数的name属性---只读。。所以上面的代码无法改变。</span></span><br><span class="line"><span class="comment">// 结果：“foo”*2</span></span><br><span class="line"><span class="comment">// 追加：Object.defineProperty()//有用过这个的么。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="regexp">/123/</span>, b = <span class="regexp">/123/</span>;</span><br><span class="line">a == b</span><br><span class="line">a === b</span><br><span class="line"><span class="comment">// 答案：每个正则都是一个新的。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">class</span>: <span class="string">"Animal"</span>, <span class="attr">name</span>: <span class="string">'Fido'</span>&#125;;</span><br><span class="line">    a.class</span><br><span class="line"><span class="comment">// 答案：关键字可不可以用呢？有的浏览器可以还是不可以。自行查看ecma。</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'one'</span>);</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'two'</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'three'</span>);</span><br><span class="line"><span class="comment">// 有关setTimeout延迟（异步或者神马的）。</span></span><br><span class="line"><span class="comment">// 结果：one three two</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>].duplicator(); <span class="comment">// [1,2,3,4,5,1,2,3,4,5]</span></span><br><span class="line"><span class="comment">// 追加：输出[1,2,3,4,5,4,3,2,1]</span></span><br><span class="line"><span class="comment">// 这个没有答案标准。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//for 循环里面通过延时器输出索引 i</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i);</span><br><span class="line">    &#125;</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 输出结果 3,3,3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">lockedIndex</span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(lockedIndex);</span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 输出 "1,2,3"</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.x = x;</span><br><span class="line">  <span class="keyword">this</span>.y = y;</span><br><span class="line">  <span class="keyword">this</span>.moveTo = <span class="function"><span class="keyword">function</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.x = x;</span><br><span class="line">    <span class="keyword">this</span>.y = y;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.x+<span class="string">','</span>+<span class="keyword">this</span>.y);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Point(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="keyword">var</span> p2 = &#123;<span class="attr">x</span>:<span class="number">0</span>,<span class="attr">y</span>:<span class="number">0</span>&#125;</span><br><span class="line">p1.moveTo(<span class="number">1</span>,<span class="number">1</span>)</span><br><span class="line">p1.moveTo.apply(p2,[<span class="number">10</span>,<span class="number">10</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">//答案:</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i);</span><br><span class="line">    &#125;</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 输出结果 3,3,3</span></span><br><span class="line"><span class="comment">// 解析:</span></span><br><span class="line"><span class="comment">// 输出结果并不是我们所预想的1,2,3。当然，</span></span><br><span class="line"><span class="comment">// 这个要涉及到setTimeout 的原理了，即使把300ms改成0ms，</span></span><br><span class="line"><span class="comment">// 同样也会输出3,3,3。具体可以查看博文 setTimeout(0) 的作用 。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// JavaScript是单线程执行的，无法同时执行多段代码。</span></span><br><span class="line"><span class="comment">// 当某段代码正在执行时，后续任务都必须等待，形成一个队列。</span></span><br><span class="line"><span class="comment">// 只有当前任务执行完毕，才会从队列中取出下一个任务——也就</span></span><br><span class="line"><span class="comment">// 是常说的“阻塞式执行”。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 上面代码中设定了一个setTimeout，那浏览器会在合适时间（此处是300ms后）</span></span><br><span class="line"><span class="comment">// 把代码插入任务队列，等待当前的for循环代码执行完毕再执行。（注意：setTimeout </span></span><br><span class="line"><span class="comment">// 虽然指定了延时的时间，但并不能保证执行的时间与设定的延时时间一直，</span></span><br><span class="line"><span class="comment">// 是否准确取决于 JavaScript 线程是拥挤还是空闲。）</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 输出1,2,3</span></span><br><span class="line"><span class="comment">//写法一</span></span><br><span class="line"><span class="comment">//把setTimeout代码包含在匿名自执行函数里面，就可以实现“锁住”索引i，正常输出索引值。</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">lockedIndex</span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(lockedIndex);</span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 输出 "1,2,3"</span></span><br><span class="line"><span class="comment">// 分析：尽管循环执行结束，i值已经变成了3。但因遇到了自执行函数，当时的i值已经</span></span><br><span class="line"><span class="comment">// 被 lockedIndex锁住了。也可以理解为 自执行函数属于for循环一部分，每次遍历i，</span></span><br><span class="line"><span class="comment">// 自执行函数也会立即执行。所以尽管有延时器，但依旧会保留住立即执行时的i值。</span></span><br><span class="line"><span class="comment">// 上面的分析有点模糊和牵强，也可以从 闭包 角度出发分析的。但鄙人“闭包”概念模糊，</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法2</span></span><br><span class="line"><span class="comment">//直接在 setTimeout 第一个参数做自执行（写法二）</span></span><br><span class="line"><span class="comment">//注意: 写法二 会比 写法一 先执行。原因不明</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout((<span class="function"><span class="keyword">function</span>(<span class="params">lockedInIndex</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(lockedInIndex);</span><br><span class="line">    &#125;)(i)</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//关于 自执行函数参数 lockedInIndex ，补充说明以下几点。</span></span><br><span class="line"><span class="comment">// 1. lockedInIndex变量，也可以换成i，因为和外面的i不在一个作用域</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i); <span class="comment">// 1,2,3</span></span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout((<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i); <span class="comment">// 1,2,3</span></span><br><span class="line">    &#125;)(i)</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 自执行函数不带入参数 </span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i); <span class="comment">// 3,3,3</span></span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout((<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i); <span class="comment">// 1,2,3</span></span><br><span class="line">    &#125;)()</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 自执行函数只有实参没有写形参</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i); <span class="comment">// 3,3,3</span></span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout((<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i); <span class="comment">// 1,2,3</span></span><br><span class="line">    &#125;)(i)</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 自执行函数只有形参没有写实参，这种情况不行。因为会导致输出 undefined。</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i); <span class="comment">// undefined,undefined,undefined</span></span><br><span class="line">        &#125;</span><br><span class="line">        ,<span class="number">300</span>);</span><br><span class="line">    &#125;)();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++)&#123;</span><br><span class="line">    setTimeout((<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i); <span class="comment">// undefined,undefined,undefined</span></span><br><span class="line">    &#125;)()</span><br><span class="line">    ,<span class="number">300</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. html元素绑定事件</span></span><br><span class="line"><span class="comment">// 假设要对页面上的元素安装点击相同的点击事件。我们会考虑如下方式。</span></span><br><span class="line">&lt;div id=<span class="string">"demo"</span>&gt;</span><br><span class="line">    &lt;p&gt;p1&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;p2&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;p3&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;p4&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;p5&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"><span class="keyword">var</span> oDiv = <span class="built_in">document</span>.getElementById(<span class="string">"demo"</span>);</span><br><span class="line"><span class="keyword">var</span> eles = oDiv.getElementsByTagName(<span class="string">"p"</span>);</span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> k=<span class="number">0</span>; k &lt; eles.length; k++)&#123;</span><br><span class="line">  eles[k].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="comment">// index is: 5, and this ele is:undefined</span></span><br><span class="line">    alert(<span class="string">"index is: "</span> + k + <span class="string">", and this ele is: "</span> + eles[k]); </span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">/** 安装事件方式也可以用 onclick 方式。</span></span><br><span class="line"><span class="comment">   * 不过这种方式安装多个onclick触发事件时，只执行最后安装的那一个。 */</span></span><br><span class="line">  <span class="comment">// eles[k].onclick = function()&#123;</span></span><br><span class="line">  <span class="comment">//  alert("index is: " + k + ", and this ele is: " + eles[k]);</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 我们期望点击某个 p元素，能得到该元素所在的索引，但实际是，点击每个p，</span></span><br><span class="line"><span class="comment">// 索引值都是5，而对应的元素都是undefined。</span></span><br><span class="line"><span class="comment">// 分析：这种现象和上面的延时器类似，JavaScript在执行for循环语句时，</span></span><br><span class="line"><span class="comment">// 负责给元素安装点击事件，但当用户点击元素触发事件时，</span></span><br><span class="line"><span class="comment">// for循环语句早就执行完毕了，此时的 i 自然是5了。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 一样的，我们也希望“锁住”索引i。</span></span><br><span class="line"><span class="comment">// 所以可以如上采用自执行函数方式（ 在addEventListener外部 ）：</span></span><br><span class="line"><span class="comment">/** 1. 自执行函数方式一 */</span></span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> k=<span class="number">0</span>; k &lt; eles.length; k++)&#123;</span><br><span class="line">  (<span class="function"><span class="keyword">function</span>(<span class="params">k</span>)</span>&#123;</span><br><span class="line">    eles[k].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"index is: "</span> + k + <span class="string">", and this ele is: "</span> + eles[k].innerHTML); </span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;)(k);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 也可以 在addEventListener里面 的处理函数使用自执行函数表达式，</span></span><br><span class="line"><span class="comment">// 具体如下。不过上面的方式更具有可读性。</span></span><br><span class="line"><span class="comment">/** 2. 自执行函数方式二 */</span></span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> k=<span class="number">0</span>; k &lt; eles.length; k++)&#123;</span><br><span class="line">  eles[k].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">k</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">      alert(<span class="string">"index is: "</span> + k + <span class="string">", and this ele is: "</span> + eles[k].innerHTML);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;(k));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//当然，除了自执行函数表达式，我们还有一种讨巧的解决办法：</span></span><br><span class="line"><span class="comment">/** 3. 讨巧的解决方案 */</span></span><br><span class="line"><span class="keyword">for</span> ( <span class="keyword">var</span> k=<span class="number">0</span>; k &lt; eles.length; k++)&#123;</span><br><span class="line">  eles[k].index = k;</span><br><span class="line">  eles[k].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"index is: "</span> + <span class="keyword">this</span>.index + <span class="string">", and this ele is: "</span> + eles[<span class="keyword">this</span>.index].innerHTML);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 把索引 k 保存在元素的属性中。在点击元素触发事件时，</span></span><br><span class="line"><span class="comment">// 巧用 this 关键字去取出当前点击对象的属性 index，也就是对应的索引。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.name = <span class="string">'peter'</span>;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            name: <span class="string">'jack'</span></span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> p1 = <span class="keyword">new</span> fun1();</span><br><span class="line">    <span class="built_in">console</span>.log(p1.name)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> fun2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.name = <span class="string">'peter'</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'jack'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> p2 = <span class="keyword">new</span> fun2();</span><br><span class="line">    <span class="built_in">console</span>.log(p2.name)</span><br></pre></td></tr></table></figure>


<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断测试生产环境</span></span><br><span class="line"><span class="keyword">var</span> baseURL;</span><br><span class="line"><span class="keyword">var</span> port = location.port; <span class="comment">//获取端口号</span></span><br><span class="line"><span class="keyword">var</span> pathName = <span class="built_in">window</span>.document.location.pathname; <span class="comment">//获取访问地址</span></span><br><span class="line"><span class="keyword">var</span> projectName = pathName.substring(<span class="number">0</span>, pathName.substr(<span class="number">1</span>).indexOf(<span class="string">"/"</span>) + <span class="number">1</span>); <span class="comment">//获取项目名</span></span><br><span class="line"><span class="keyword">var</span> domain = <span class="built_in">window</span>.location.host;</span><br><span class="line"><span class="keyword">var</span> re=<span class="regexp">/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/</span>;<span class="comment">//正则表达式   </span></span><br><span class="line"><span class="comment">// 判断是否为本地</span></span><br><span class="line"><span class="keyword">if</span> (<span class="regexp">/^http(s*):\/\//</span>.test(location.href)) &#123;</span><br><span class="line">    <span class="keyword">if</span>(domain === <span class="string">"localhost"</span>|| re.test(domain) )&#123;</span><br><span class="line">        baseURL = <span class="string">"http://test-kxc.ruixiude.com:20082/"</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        baseURL = <span class="built_in">document</span>.location.protocol + <span class="string">'//'</span> + <span class="built_in">document</span>.location.host + <span class="string">'/'</span> </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="JavaScript理解"><a href="#JavaScript理解" class="headerlink" title="JavaScript理解"></a>JavaScript理解</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">//对于JavaScript来讲，</span></span><br><span class="line"><span class="comment">//第一要理解它的基于对象；</span></span><br><span class="line"><span class="comment">//第二要理解在js里一切都是对象；</span></span><br><span class="line"><span class="comment">//第三要理解按值和按址传递的区别。也就是要把js最最最基本的数据类型，搞清楚，记牢。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 然后在此基础之上，才能去深入理解 function即是对象，又是函数；即可以声明，</span></span><br><span class="line"><span class="comment">// 也可以赋值，同时还可以做为参数被传入其它函数，而书上明确说了参数都是【值】，</span></span><br><span class="line"><span class="comment">// 但是被传入的函数在其它函数内部依然指向原函数，是什么原因。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是因为函数是对象，它是按址传递的，传入其它函数内部的时候，被传入的其实是函数的地址。</span></span><br><span class="line"><span class="comment">// 还有类似的基本的这种，</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 0===0; //true</span></span><br><span class="line"><span class="comment">// [] === []; //false</span></span><br><span class="line"><span class="comment">// 为什么？</span></span><br><span class="line"><span class="comment">// 因为[]是数组，数组是对象，对象是按址保存的，在内存中是二个不同的地址，</span></span><br><span class="line"><span class="comment">// 所以比较相等性为false。而0是基本类型，它是按值保存的；比较的是二个值，所以相等性为true。</span></span><br><span class="line"><span class="comment">// 所以，如果不从根本上去理解JavaScript是基于对象的这一点，那么上面的例子你不可能理解。</span></span><br><span class="line"><span class="comment">// 你只会觉得这明明是二个空数组，为什么不相等呢？</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这是对于JavaScript基础知识的重要性、和必要性的说明。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 什么叫用js做东西？</span></span><br><span class="line"><span class="comment">// 其实是你要做的这个东西，也可以叫项目，它有哪些功能？这叫“需求分析”。</span></span><br><span class="line"><span class="comment">// 你这个项目的各个功能之间是如何操作的？</span></span><br><span class="line"><span class="comment">// 第一步如何，</span></span><br><span class="line"><span class="comment">// 第二步如何，这叫“业务逻辑”；</span></span><br><span class="line"><span class="comment">// 你想清楚了一个东西要怎么做，然后把它的制作步骤分解，然后按步骤去实现。</span></span><br><span class="line"><span class="comment">// 这个过程叫“开发过程”，至少搞清这三步之后，你才可以开始动手做。</span></span><br></pre></td></tr></table></figure>

<hr>
<h2 id="后盾网JavaScript培训"><a href="#后盾网JavaScript培训" class="headerlink" title="后盾网JavaScript培训"></a>后盾网JavaScript培训</h2><h3 id="javascript变量"><a href="#javascript变量" class="headerlink" title="javascript变量"></a>javascript变量</h3><blockquote>
<p>变量：可以存储数据的一个容器。可以存储和引用任何的数据。<br>变量的创建，一般以“var”关键字来修饰。</p>
</blockquote>
<ol>
<li>先声明，后赋值<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> bbs;</span><br><span class="line">bbs=<span class="string">"bbs.houdunwang.com"</span>;</span><br></pre></td></tr></table></figure></li>
<li>声明和赋值同时进行<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> url=<span class="string">"www.houdunwang.com"</span>;</span><br></pre></td></tr></table></figure></li>
<li>一次声明多个变量，然后再赋值<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name, age;</span><br><span class="line">name=<span class="string">"lisi"</span>;</span><br><span class="line">age=<span class="number">14</span>;</span><br></pre></td></tr></table></figure></li>
<li>一次声明多个变量同时进行赋值。<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name=<span class="string">"wangwu"</span>,age=<span class="number">17</span>,sex=<span class="string">"girl"</span>;</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="javascript命名规范"><a href="#javascript命名规范" class="headerlink" title="javascript命名规范"></a>javascript命名规范</h3><ol>
<li>严格区分大小写</li>
<li>变量的命名必须以字母或 _或 $开头，余下的部分可以是任意的字母，数字，或者是 _或者是$</li>
<li>不能用关键字或者是保留字命名。</li>
<li>javascript自己的命名习惯<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//驼峰命名法：getElementById</span></span><br></pre></td></tr></table></figure></li>
<li>命名一定要有意义</li>
<li>;的用法（记忆技巧：和古诗中的逗号用法一致）</li>
</ol>
<h3 id="声明变量注意的问题"><a href="#声明变量注意的问题" class="headerlink" title="声明变量注意的问题"></a>声明变量注意的问题</h3><ol>
<li>如果重新声明该变量，而没有赋值，该变量的值不会改变</li>
<li>如果重新声明该变量并且重新赋值，那么旧的变量值会删除，改为新的变量值。</li>
</ol>
<h3 id="javascript中的数据类型"><a href="#javascript中的数据类型" class="headerlink" title="javascript中的数据类型"></a>javascript中的数据类型</h3><ol>
<li>初始类型(基本类型)<ul>
<li>Undefined</li>
<li>Null</li>
<li>Number</li>
<li>String</li>
<li>Boolean 布尔值</li>
</ul>
</li>
<li>引用类型<ul>
<li>object(class)</li>
</ul>
</li>
<li>typeof 操作符<br>他是用来检测数据类型的一元运算符<br>（注意：一些只需要一个参数的运算符称为一元运算符），<br>并且返回的结果始终是一个字符串。</li>
</ol>
<h3 id="初始类型-String类型"><a href="#初始类型-String类型" class="headerlink" title="初始类型-String类型"></a>初始类型-String类型</h3><ul>
<li>用单双引号来说明，他所包围的值都可以是字符串。</li>
<li>单双引号的用法：<ul>
<li>效率是一样的</li>
<li>只能成对出现，不能相互交叉使用</li>
<li>可以相互嵌套。</li>
</ul>
</li>
</ul>
<h3 id="初始类型-Number类型"><a href="#初始类型-Number类型" class="headerlink" title="初始类型-Number类型"></a>初始类型-Number类型</h3><ul>
<li>Number数值类型<ol>
<li>整型</li>
<li>浮点型</li>
</ol>
</li>
</ul>
<h3 id="初始类型-null"><a href="#初始类型-null" class="headerlink" title="初始类型- null"></a>初始类型- null</h3><p>Null指的是什么都没有，是一个空对象。相当于一个占位符。</p>
<h3 id="初始类型-Undefined"><a href="#初始类型-Undefined" class="headerlink" title="初始类型- Undefined"></a>初始类型- Undefined</h3><p>指的就是变量创建后但是没有赋值，而变量的默认值就是undefined</p>
<h3 id="对象类型"><a href="#对象类型" class="headerlink" title="对象类型"></a>对象类型</h3><p>object (class)<br>包含相关属性和方法的一个集合。</p>
<h3 id="javascript运算符"><a href="#javascript运算符" class="headerlink" title="javascript运算符"></a>javascript运算符</h3><p>运算符和操作数的组合就称为表达式。</p>
<ul>
<li>算术运算符</li>
<li>关系运算符(比较运算符)</li>
<li>赋值运算符</li>
<li>逻辑运算符</li>
<li>三元运算符</li>
</ul>
<h4 id="算数运算符"><a href="#算数运算符" class="headerlink" title="算数运算符"></a>算数运算符</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">+ - * &#x2F; % var++ ++var var-- --var</span><br></pre></td></tr></table></figure>
<p>“+” 加号(字符串连接号)<br>• 用于数值的运算<br>• 用于字符串的连接<br>• 任何的数据类型和字符串相加都是等于相加以后的字符串<br>“%”(取余)<br>• 一般不用于小数，因为结果不确定。<br>var++<br>• 先运行，再自增，比较无私，先人后己<br>++var<br>• 先自增，再运行，比较自私，先己后人</p>
<h4 id="关系运算符-比较运算符"><a href="#关系运算符-比较运算符" class="headerlink" title="关系运算符(比较运算符)"></a>关系运算符(比较运算符)</h4><p>&lt; &gt; &lt;= &gt;= == === != !==<br>他们运算的结果都是布尔值。<br>== 比较两个数的值是否相等<br>=== 不但比较值是否相等，还比较类型是否相等。</p>
<h4 id="关系运算符-比较运算符-注意"><a href="#关系运算符-比较运算符-注意" class="headerlink" title="关系运算符(比较运算符)注意"></a>关系运算符(比较运算符)注意</h4><p>• 都是数值的时候，他会正常比较<br>• 都是字符串的时候，他会先转换成ASCII码然后进行比较他们的第一个字母。<br>• 当一个字符串，另一个是数值的时候，把字符串尝试转换成数值<br>类型，然后进行比较，如果不能转换成数值类型 ，返回假<br>• 如果一个数值和布尔值进行比较，会把布尔值转换为数值再进行<br>比较，true为1，false为 0</p>
<h4 id="赋值运算符"><a href="#赋值运算符" class="headerlink" title="赋值运算符"></a>赋值运算符</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">= += -= *= <span class="regexp">/= %=</span></span><br><span class="line"><span class="regexp">var num=1 ;</span></span><br><span class="line"><span class="regexp">num+=3;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/相当于：</span></span><br><span class="line"><span class="regexp">num=num+3</span></span><br></pre></td></tr></table></figure>


<h4 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h4><p>与 and &amp;&amp; 或 or || 非not !<br>&amp;&amp;<br>• 运算符两边只要有一个是假，那么他的运算结果就是假，只<br>有两个都为真的时候，运算结果才是真的。<br>||<br>• 算符两边只要有一个是真的那么他就是真的，只有当两个都<br>是假的时候，他才是假的。<br>!<br>• 取反，假的变成真的，真的变成假的。</p>
<h4 id="逻辑运算符注意"><a href="#逻辑运算符注意" class="headerlink" title="逻辑运算符注意"></a>逻辑运算符注意</h4><p>逻辑运算符可以对任何类型的数据进行运算但是在运算的时候，<br>可以转换为对应的布尔值<br>• Undefine false<br>• Null false<br>• Boolean 就是本身的值<br>• Number 除了0以外都是真的<br>• String 除了空字符串以外都是真的<br>• 对象 真的</p>
<h4 id="三元运算符"><a href="#三元运算符" class="headerlink" title="三元运算符"></a>三元运算符</h4><p>根据表达式的计算结果有条件的为变量赋值<br>格式:<br>var 变量= 条件?条件为真的值:条件为假的值</p>
<h3 id="javascript流程控制"><a href="#javascript流程控制" class="headerlink" title="javascript流程控制"></a>javascript流程控制</h3><blockquote>
<p>流程:就是程序代码的执行顺序。<br>流程控制:通过规定的语句让程序代码有条件的   按照一定的方式执行</p>
</blockquote>
<ul>
<li>顺序结构<br>按照书写顺序来执行，是程序中最基本的流程结构。</li>
<li>选择结构(分支结构、条件结构)<br>根据给定的条件有选择的执行相应的语句</li>
<li>循环结构<br>在给定的条件满足的情况下，反复的执行同一段代码。</li>
</ul>
<h3 id="选择结构-分支结构、条件结构"><a href="#选择结构-分支结构、条件结构" class="headerlink" title="选择结构(分支结构、条件结构)"></a>选择结构(分支结构、条件结构)</h3><ol>
<li><p>单路分支<br>• 条件可以是表达式也可以是任何的数据类型<br>• 大括号会把他里面的代码当作一个整体来运行，如果只有一条语句，可<br>以省略大括号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件)&#123;</span><br><span class="line">    条件成立执行的语句</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>双路分支</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件)&#123;</span><br><span class="line">    条件成立的时候执行的代码</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    条件不成立的时候执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>多路分支</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件<span class="number">1</span>)&#123;</span><br><span class="line">  条件<span class="number">1</span>成立执行的代码</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">2</span>)&#123;</span><br><span class="line">  条件<span class="number">2</span>成立执行的代码</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">3</span>)&#123;</span><br><span class="line">  条件<span class="number">3</span>成立执行的代码</span><br><span class="line">&#125;......else&#123;</span><br><span class="line">  如果上述条件都不成立执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>嵌套分支</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件<span class="number">1</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>()&#123;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>()&#123;</span><br><span class="line">    &#125;....</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">2</span>)&#123;</span><br><span class="line">    条件<span class="number">2</span>成立执行的代码</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">3</span>)&#123;</span><br><span class="line">    条件<span class="number">3</span>成立执行的代码</span><br><span class="line">    &#125;......else&#123;</span><br><span class="line">    如果上述条件都不成立执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ul>
<li>switch语句<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(变量任何的数据类型)&#123;</span><br><span class="line">    <span class="keyword">case</span> 值<span class="number">1</span>:</span><br><span class="line">    表达式<span class="number">1</span>；</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> 值<span class="number">2</span>:</span><br><span class="line">    表达式<span class="number">3</span>；</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">    .........</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">    表达式；</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="分支结构注意事项"><a href="#分支结构注意事项" class="headerlink" title="分支结构注意事项"></a>分支结构注意事项</h3><p>• 当判断某种范围的时候最好用if语句<br>• 当判断单个值时候用switch</p>
<h3 id="循环结构"><a href="#循环结构" class="headerlink" title="循环结构"></a>循环结构</h3><p>在给定的条件满足的情况下，反复的执行同一段代码。</p>
<ul>
<li>for循环<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(变量=初始值;变量&lt;=结束值;变化值)&#123;</span><br><span class="line">    循环体</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>while循环<br>当条件满足的时候，执行循环体，当不满足的时候退出循环<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(表达式)&#123;</span><br><span class="line">    循环体</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">do</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;<span class="keyword">while</span>(表达式)</span><br></pre></td></tr></table></figure>
先最少执行一次，再进行条件的判断，如果条件满足继续<br>执行，如果不满足则退出循环。</li>
</ul>
<h3 id="循环结构注意问题"><a href="#循环结构注意问题" class="headerlink" title="循环结构注意问题"></a>循环结构注意问题</h3><ol>
<li>do while 和while的区别<br>while:当条件满足的时候，执行循环体，当不满足的时候退出循环,先判断<br>后执行。<br>do{}while：先最少执行一次，再进行条件的判断，如果条件满足继续执<br>行，如果不满足则退出循环。</li>
<li>for 和while的区别<br>for一般是用于循环指定的次数<br>while是根据条件的真假来循环，当真的时候进行循环，假的时候退出循环。</li>
</ol>
<h3 id="循环结构中的跳转语句"><a href="#循环结构中的跳转语句" class="headerlink" title="循环结构中的跳转语句"></a>循环结构中的跳转语句</h3><p>在循环控制语句中，当满足指定条件的时候，退出循环或者是退出<br>当前循环的语句。</p>
<ol>
<li>break;<br>语法:break;<br>跳出并且终止循环，如果循环体后面有代码，则继续往下执行。</li>
<li>continue;<br>格式:continue;<br>跳出并且终止当前的循环，如果下个值仍满足循环条件，则继续循环。</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span>(num&lt;<span class="number">10</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(num == <span class="number">3</span>)&#123;</span><br><span class="line">        <span class="comment">// break;</span></span><br><span class="line">        num++;</span><br><span class="line">        <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(num+<span class="string">'--'</span>);</span><br><span class="line">    num++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="javascript函数"><a href="#javascript函数" class="headerlink" title="javascript函数"></a>javascript函数</h3><p>函数:<br>将完成某一特定功能的代码集合起来，可以重复使用的代<br>码块。函数是一个工厂，帮我们实现某一个功能。<br>优点:<br>• 使程序更加简洁<br>• 逻辑更有条理<br>• 调用更方便<br>• 维护更加容易</p>
<h3 id="函数的声明方式-创建"><a href="#函数的声明方式-创建" class="headerlink" title="函数的声明方式(创建)"></a>函数的声明方式(创建)</h3><p>function 关键字</p>
<p>function 函数名([参数1],[参数2]….){<br>    函数体<br>    [retrun] //返回值<br>}</p>
<h3 id="函数的调用方式"><a href="#函数的调用方式" class="headerlink" title="函数的调用方式"></a>函数的调用方式</h3><p>通过括号来调用<br>函数名()<br>通过触发事件来调用<br>对象.事件=function (){}</p>
<h3 id="带有参数的函数"><a href="#带有参数的函数" class="headerlink" title="带有参数的函数"></a>带有参数的函数</h3><p>• 参数的作用:<br>可以动态的改变函数体内对应的变量的值，使同一函数体<br>得到不同的结果。</p>
<p>• 形参:在定义函数的时候，函数括号中定义的变量叫做形<br>参。用来接受实参的。</p>
<p>• 实参:调用函数的时候，在括号中传入的变量或值叫做实<br>参。用于传递给形参。</p>
<h3 id="函数的返回值"><a href="#函数的返回值" class="headerlink" title="函数的返回值"></a>函数的返回值</h3><ul>
<li>return 语句<br>通过return 语句给函数一个返回值，停止并且跳出当前的函数</li>
<li>return语句的用法<br>在return 语句后面的函数体内所有内容都不会输出。<br>在函数体内可以有多个return语句，但是只会执行一个。(判断语句)</li>
<li>return语句的返回值<br>返回值可以是任何的数据类型<br>只能返回一个返回值。<br>如果函数没有返回值，那么这个函数的值就会自动的赋值为undefined</li>
</ul>
<h3 id="变量的作用域"><a href="#变量的作用域" class="headerlink" title="变量的作用域"></a>变量的作用域</h3><p>作用域:指的就是一段代码的作用范围。</p>
<ol>
<li>全局变量<br> 在页面中任何地方都能够访问得到的变量，拥有全局的作用域。<br> A.函数的最外层定义的变量。<br> B.没有定义直接赋值的变量，拥有全局属性</li>
<li>局部变量<br> 只能在固定的代码片段(函数片段中)中访问到。<br> A.函数内部定义的变量，就是局部变量。<br> B.参数也是局部变量。<br> 可以提高程序的逻辑性和安全性，减少名字的冲突。</li>
</ol>
<h3 id="javascript-内置顶层函数"><a href="#javascript-内置顶层函数" class="headerlink" title="javascript 内置顶层函数"></a>javascript 内置顶层函数</h3><p>内置: ECMAscript 自带的函数，ECMAscript将我们常用的<br>一些功能封装起来，我们不需要知道他是怎么实现的，只需<br>要知道怎么调用即可。<br>顶层 ,在页面当中的任何地方都可以调用。</p>
<ol>
<li>Number() 转换成数值类型</li>
<li>parseInt() 将字符串转换为整型</li>
<li>parseFloat() 转换为小数</li>
<li>isNaN() 判断一个数是否不能转为数值类型。</li>
<li>eval() 用javascript语法来解析字符串内容</li>
</ol>
<h3 id="转换成数值类型"><a href="#转换成数值类型" class="headerlink" title="转换成数值类型"></a>转换成数值类型</h3><ul>
<li>Number() 转换成数值类型<br>A. 如果是布尔值，false为0，true为1<br>B. 如果是数字，转换成为本身。将无意义的后导0去掉。<br>C. 如果是undefined 转换为NaN not a number<br>D. 如果是字符串</li>
</ul>
<ol>
<li>如果字符串当中只有数字，转换为10进制(忽略前导0和后导0)</li>
<li>如果是有效的规范的浮点型，转换为浮点值(忽略前导0和后导0)</li>
<li>如果是空字符串，则转换为0</li>
<li>如果是其他的值，返回NaN</li>
</ol>
<h3 id="转换成数值类型-1"><a href="#转换成数值类型-1" class="headerlink" title="转换成数值类型"></a>转换成数值类型</h3><p>parseInt(参数1，参数2) 将字符串转换为整数<br>• 如果一个字符串只包含数字，则以10进制的方式转换为整<br>型。</p>
<p>• 他会自动忽略字符串前面的空格，直到找到第一个非空的<br>数值字符串，如果字符串的第一个字符不是空格、数字、-，<br>那么返回NaN</p>
<p>• 第二个参数是指定第一个参数的进制数</p>
<h3 id="转换成数值类型-2"><a href="#转换成数值类型-2" class="headerlink" title="转换成数值类型"></a>转换成数值类型</h3><p>parseFloat() 将字符串转换为浮点数<br>• 字符串当中的.只有第一个有效，其他的都是无效的。</p>
<p>• 如果字符串是一个有效的整数，他返回的是整数，不会返<br>  回浮点数。</p>
<h3 id="isNaN"><a href="#isNaN" class="headerlink" title="isNaN()"></a>isNaN()</h3><p>isNaN() 用于检查其参数是否是非数字值<br>如果能转换成数值返回假，不能转换成数值类型，返回真。</p>
<h3 id="eval"><a href="#eval" class="headerlink" title="eval()"></a>eval()</h3><p>eval() 用javascript语法来解析字符串内容<br>var str = ‘1+2’;<br>alert(eval(sta));</p>
<h3 id="JavaScript数组"><a href="#JavaScript数组" class="headerlink" title="JavaScript数组"></a>JavaScript数组</h3><p>数组是一个可以存储 一组或是一系列相关数据的容器。<br>为什么要使用数组？<br>• 解决大量相关数据的存储和使用的问题。<br>• 便于程序的开发和维护。</p>
<h3 id="声明-创建-数组"><a href="#声明-创建-数组" class="headerlink" title="声明(创建)数组"></a>声明(创建)数组</h3><p>隐形声明的方式<br>• 变量=[ ];<br>• 直接赋值 var a=[1,2,3,4];<br>• 声明以后赋值 :var a=[];a[0]=1;a[1]=2;<br>通过构造函数来声明<br>• new Array();<br>• 直接赋值 var a=new Array(元素1,元素2,元素3..)<br>• 声明以后再赋值</p>
<h3 id="遍历数组的方式"><a href="#遍历数组的方式" class="headerlink" title="遍历数组的方式"></a>遍历数组的方式</h3><p>for 循环</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> shuiguo = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'水蜜桃'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'芒果'</span>,<span class="string">'火龙果'</span>];</span><br><span class="line"><span class="comment">//遍历数组</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;shuoguo.length;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(shuiguo[i]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="访问-操作-数组"><a href="#访问-操作-数组" class="headerlink" title="访问(操作)数组"></a>访问(操作)数组</h3><p>• 通过数组的(中括号)下标访问。<br>• 数组下标从0开始，他的最大值，是length属性减一<br>• 数组的length属性，表示数组的长度</p>
<h3 id="数组的维度"><a href="#数组的维度" class="headerlink" title="数组的维度"></a>数组的维度</h3><p>A.一维数组<br>B.二维数组<br>声明二维数组:<br>// var arr=[[1,2,3],[4,5,6]];<br>// alert(arr[1][1])</p>
<h3 id="小练习"><a href="#小练习" class="headerlink" title="小练习"></a>小练习</h3><p>1.自己写一个函数，用来取得一个数组中的最大的值<br>arr = [1,56,23,6,43,87,3,5,55];</p>
<p>2.自己写一个函数,用来取得二维数组中长度最大的子数组的<br>序号。</p>
<h3 id="javascript对象"><a href="#javascript对象" class="headerlink" title="javascript对象"></a>javascript对象</h3><p>一、名词解释:</p>
<ol>
<li>基于对象<br>一切皆对象，以对象的概念来编程。</li>
<li>面向对象编程(OOP Object oriented programming)<br>A.对象<br>就是人们要研究的任何事物，不仅能表示具体事物，还能表示抽象的规则，计划或<br>事件。<br>属性的无序集合，每个属性可以存一个值(原始值，对象，函数)<br>B.对象的属性和行为<br>属性:用数据值来描述他的状态<br>方法:用来改变对象行为的方法<br>C.类（构造函数）<br>具有相同或相似的性质的对象的抽象就是类。对象的抽象，就是类，类的具体化(实<br>例化) 就叫做对象</li>
</ol>
<h3 id="创建-声明-对象"><a href="#创建-声明-对象" class="headerlink" title="创建(声明)对象"></a>创建(声明)对象</h3><p>json方法、原生格式<br>var obj={};</p>
<h3 id="添加属性和方法"><a href="#添加属性和方法" class="headerlink" title="添加属性和方法"></a>添加属性和方法</h3><p>如果属性的值是函数，我们叫做他是对象的方法，否则叫做是属<br>性。<br>A.声明的时候添加<br>var obj={属性名:属性值，属性名2:属性值2，属性名3:属性值<br>3，……};<br>B.声明以后再添加</p>
<h3 id="访问对象的属性和方法"><a href="#访问对象的属性和方法" class="headerlink" title="访问对象的属性和方法"></a>访问对象的属性和方法</h3><p>访问属性:<br>    引用值.属性<br>访问方法:<br>    引用值.属性();</p>
<h3 id="删除对象的属性"><a href="#删除对象的属性" class="headerlink" title="删除对象的属性"></a>删除对象的属性</h3><p>delete 对象.属性</p>
<h3 id="javascrit数组对象"><a href="#javascrit数组对象" class="headerlink" title="javascrit数组对象"></a>javascrit数组对象</h3><p>一、属性<br>    1.length<br>    设置或返回数组元素的数目。</p>
<ol>
<li>数组对象.push(数组元素……)<br> 向数组的末尾添加新的元素，返回值是新数组的长度。可以一次添加多<br>个元素</li>
<li>数组对象.unshift(数组元素…..)<br> 向数组的开头加入新的元素，返回值是新数组的长度。可以一次添加多<br>个元素</li>
<li>数组对象.pop()<br> 删除数组的最后一个元素，返回删除的元素</li>
<li>数组对象.shift()<br> 删除数组的第一个元素，返回删除的元素</li>
<li>万能的添加删除函数(用于插入、删除或替换数组的元素。)<br>数组元素.splice(起始位置,数量,添加的元素…..)<br>(1) 起始位置 从何处开始添加或删除，必须是数值类<br> 型(数组的下标)<br>(2) 数量 规定了删除的个数，如果是0，则不删除<br>(3) 需要添加的元素，可以当作替换的元素</li>
</ol>
<p>数组的分割<br>数组.slice()<br>从截取指定的开始位置，到结束位置(不包括)的元素。如果<br>不指定结束位置，则从指定的开始位置，取到结尾(数组的下<br>标)<br>支持负数(-1开头)</p>
<h3 id="小练习-1"><a href="#小练习-1" class="headerlink" title="小练习"></a>小练习</h3><p>自定义一个函数(删除数组的重复元素)<br>[‘a’,’b’,’c’,’a’,’a’,’a’,’d’,’e’,’c’,’f’,’d’]<br>自定义一个函数(对数组中的元素排序)<br>[10,75,44,32,30,7]<br>30选7彩票随机号码</p>
<h3 id="javascript字符串对象"><a href="#javascript字符串对象" class="headerlink" title="javascript字符串对象"></a>javascript字符串对象</h3><p>一、属性<br>1.length<br>计算字符串的长度(不区分中英文)<br>2.constructor<br>对象的构造函数</p>
<blockquote>
<p>获取类型</p>
</blockquote>
<ol>
<li>字符串.charAt(num)<br>返回在指定位置的字符。</li>
<li>字符串.charCodeAt(num)<br>返回指定位置的字符的Unicode编码</li>
<li>String.fromCharCode()<br>接受一个或多个指定的Unicode值，然后返回一个或多个<br>字符串。它不能作为您已创建的 String 对象的方法来使用。</li>
</ol>
<blockquote>
<p>查找类型</p>
</blockquote>
<ol>
<li>字符串.indexOf(“”)<br>返回某个指定的字符串在字符串对象中首次出现的位置</li>
<li>字符串.lastIndexOf()<br>返回指定的字符串值最后出现的位置</li>
<li>字符串.match()<br>在字符串中检索指定的值，返回的值就是指定的值</li>
<li>字符串.replace(目标值，替换值)<br>将字符串中的一些字符替换为另外一些字符</li>
</ol>
<blockquote>
<p>截取类型<br>1.字符串.slice(start,end)<br>从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指<br>定结束位置，则从指定的开始位置，取到结尾<br>slice参数可以是负数，如果是负数，从-1开始指的是字符串结尾。<br>2.字符串.substr(start,length)<br>从指定的位置开始取指定长度的字符串。如果没有指定长度，<br>从指定开始的位置取到结尾。</p>
</blockquote>
<blockquote>
<p>转换类型</p>
</blockquote>
<ol>
<li>字符串.split()<br>将一个字符串分割成数组</li>
<li>字符串.toLowerCase();<br>用于把字符串转换为小写。</li>
<li>字符串.toUpperCase()<br>将字符串转换为大写</li>
</ol>
<h3 id="小练习-2"><a href="#小练习-2" class="headerlink" title="小练习"></a>小练习</h3><p>查找字符串“后盾视频下载地址:bbs.houdunwang.com，<br>论坛地址：bbs.houdunwang.com,官方网址：<br><a href="http://www.houdunwang.com”" target="_blank" rel="noopener">www.houdunwang.com”</a> 将所有”houdunwang”出现<br>的位置，打印出来</p>
<h3 id="javascript-Math对象"><a href="#javascript-Math对象" class="headerlink" title="javascript Math对象"></a>javascript Math对象</h3><ol>
<li>取绝对值 Math.abs();</li>
<li>取近似整数<br> Math.round() 四舍五入<br> Math.floor() 对数进行向下取舍<br> Math.ceil() 对数进行向上取舍</li>
<li>取随机数<br> Math.random();<br> 取x到y之间的随机数：Math.random()<em>(y-x)+x;<br> 取随机整数：Math.floor(Math.random()</em>(y+1-x)+x);</li>
</ol>
<h3 id="小练习-3"><a href="#小练习-3" class="headerlink" title="小练习"></a>小练习</h3><p>写一个随机点菜程序<br>1、创建一个数组<br>2、随机数组下标<br>3、将随机出来的下标对应的数组元素输出出来<br>取x到y之间的随机数：Math.random()<em>(y-x)+x;<br>取随机整数：Math.floor(Math.random()</em>(y+1-x)+x);</p>
<h3 id="浏览器对象模型-BOM"><a href="#浏览器对象模型-BOM" class="headerlink" title="浏览器对象模型-BOM"></a>浏览器对象模型-BOM</h3><blockquote class="pullquote mindmap mindmap-md"><ul>
<li><a href="https://juejin.im/entry/5aabcfc7f265da239f07228f" target="_blank" rel="noopener">BOM</a><ul>
<li>Window对象<ul>
<li>Location对象</li>
<li>History对象</li>
<li>Screen对象</li>
<li>Navigator对象</li>
</ul>
</li>
</ul>
</li>
</ul>
</blockquote>
<p>BOM Browser Object Model<br>window对象 是BOM中所有对象的核心</p>
<h3 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h3><p>其他方法:<br>alert() 显示带有一段消息和一个确认按钮的警告框。<br>confirm() 显示带有一段消息以及确认按钮和取消按钮的对<br>话框。<br>prompt() 显示可提示用户输入的对话框。</p>
<h3 id="定时器函数"><a href="#定时器函数" class="headerlink" title="定时器函数"></a>定时器函数</h3><p>setInterval(函数指针,指定的时间(毫秒)) 按照指定的周<br>期(毫秒)不断的执行函数<br>    setInterval(函数名,2000);<br>    clearInterval()<br>setTimeout(函数指针,指定的时间(毫秒)) 在指定的毫秒<br>数后只执行一次函数<br>    learTimeout()</p>
<h3 id="history对象"><a href="#history对象" class="headerlink" title="history对象"></a>history对象</h3><p>History 对象包含用户（在浏览器窗口中）访问过的 URL ，<br>他是window对象的子对象。</p>
<ul>
<li><p>属性:<br>length 返回浏览器历史列表中的 URL 数量。</p>
</li>
<li><p>方法:<br>history.back() 加载 history 列表中的前一个 URL。<br>history.forward() 加载 history 列表中的下一个<br>history.go(number)</p>
</li>
<li><p>方法:<br>assign() 加载新的文档。<br>replace() 用新的文档替换当前文档。<br>reload() 重新加载当前文档(刷新)。<br>assign()加载文档后会在历史记录里面留下记录，而replace()<br>是指替换当前文档，不会留下记录</p>
</li>
</ul>
<h3 id="小练习-4"><a href="#小练习-4" class="headerlink" title="小练习"></a>小练习</h3><p>让一个页面在5秒钟后跳转到另一个页面。</p>
<h3 id="javascript事件"><a href="#javascript事件" class="headerlink" title="javascript事件"></a>javascript事件</h3><ol>
<li>事件触发条件</li>
<li>事件源</li>
<li>事件处理程序<br>怎么样了谁，然后怎么怎么样</li>
</ol>
<p>怎么样了 - 触发条件</p>
<p>谁 - 事件源</p>
<p>然后怎么怎么样 - 事件处理程序</p>
<ol>
<li><p>常用的鼠标事件<br>onclick 鼠标单击事件<br>ondblclick 鼠标双击事件<br>onmousedown 鼠标按下时的事件<br>onmouseup 鼠标抬起时的事件<br>onmousemove 鼠标移动事件，在内部移动也触发<br>onmouseover 鼠标移入事件<br>onmouseout 鼠标离开时的事件</p>
</li>
<li><p>键盘事件<br>onkeyup 抬起键时的事件<br>onkeydown 按下键时的事件<br>onkeypress 按下并放开任何字母数字键时发生</p>
</li>
<li><p>表单事件<br>onsubmit 点击提交按钮时发生的事件<br>onblur 失去焦点时发生的事件<br>onfocus 获得焦点时发生的事件<br>onchange 内容发生变化并失去焦点时触发的事件</p>
</li>
<li><p>页面事件<br>onload</p>
</li>
<li><p>窗体事件<br>onresize</p>
</li>
<li><p>滚动条事件<br>onscroll</p>
</li>
</ol>
<p>如何绑定事件</p>
<ol>
<li>在脚本中绑定</li>
<li>直接在HTML元素绑定</li>
</ol>
<h3 id="javascript—DOM"><a href="#javascript—DOM" class="headerlink" title="javascript—DOM"></a>javascript—DOM</h3><p>DOM document(html) object modle<br>document对象(DOM核心对象)<br>dom能用来干什么？<br>对html元素的样式(颜色、大小、位置等等)、内容、属性<br>来进行动态的改变和操作。<br>后盾人 人人做后盾</p>
<p>document对象<br>一、属性<br>title 返回或设置当前文档的标题<br>方法:<br>getElementById(idname) 返回拥有指定id的（第一个）对象的引用<br>getElementsByTagName(tagname) 返回带有指定标签名的对象的集合<br>getElementsByName(name) 返回带有指定name指定名称的对象的集合<br>getElementsByClassName() 返回带有指定class指定名称的对象的集合</p>
<h3 id="对元素内容的操作"><a href="#对元素内容的操作" class="headerlink" title="对元素内容的操作"></a>对元素内容的操作</h3><p>操作内容</p>
<ol>
<li>innerHTML 用来设置或获取对象起始和结束标签内的<br>内容(识别html标签)</li>
<li>innerText 用来设置或获取对象起始和结束标签内的文<br>字内容 (IE)</li>
<li>textContent 用来设置或获取对象起始和结束标签内的<br>文字内容 (FF)</li>
</ol>
<p>操作元素特定属性：<br>    获取：对象.属性<br>    设置：对象.属性 = 属性值<br>    特定属性：ID、CLASS、A标签的href属性、IMG标签的<br>    src属性等<br>获得任意属性<br>    对象.getAttribute(属性名)<br>设置任意属性：<br>    对象.setAttribute(属性名，属性值)</p>
<p>获取和设置行内样式：<br>    获取： 对象.style.样式<br>    设置： 对象.style.样式 = 值</p>
<h3 id="对样式的操作"><a href="#对样式的操作" class="headerlink" title="对样式的操作"></a>对样式的操作</h3><p>行内样式和外部样式通用的获取方法</p>
<p>对象.currentStyle.CSS样式</p>
<ul>
<li>IE用来获得实际的样式属性</li>
</ul>
<p>getComputedStyle(对象,null).CSS样式</p>
<ul>
<li>火狐用来获得实际的样式属性</li>
</ul>
<p>只能获取不能设置</p>
<h3 id="想一想"><a href="#想一想" class="headerlink" title="想一想"></a>想一想</h3><ol>
<li><p>让一个宽高都是200px的div,以每200毫秒<br>增大10px的速度增大到宽高都为400px后，<br>然后再以同样的速度减小到原始尺寸。</p>
</li>
<li><p>模拟一个登录出错，5秒后跳转，要求：显示出秒数的变化。</p>
</li>
</ol>
<h3 id="DOM-模型-model"><a href="#DOM-模型-model" class="headerlink" title="DOM 模型(model)"></a>DOM 模型(model)</h3><p>HTML 文档中的所有节点组成了一个文档树模型，<br>HTML 文档中的每个元素、属性、文本等都代表着树中的一<br>个节点。这些节点相互联系，相互影响，构成一个完整的页<br>面，我们称之为模型。</p>
<h3 id="节点"><a href="#节点" class="headerlink" title="节点"></a>节点</h3><p>HTML 文档中的每个成分都是一个节点。<br>• 整个文档是一个文档节点<br>• 每个 HTML 标签是一个元素节点<br>• 包含在 HTML 元素中的文本是文本节点<br>• 每一个 HTML 属性是一个属性节点<br>• 注释属于注释节点</p>
<h3 id="节点的属性"><a href="#节点的属性" class="headerlink" title="节点的属性"></a>节点的属性</h3><p>通过节点属性我们能获得每个节点的详细信息<br>(包括节点类型、节点名字、节点值)<br>获得节点信息的属性</p>
<table>
<thead>
<tr>
<th>表头</th>
<th>节点类型 nodeType</th>
<th>节点名称 nodeName</th>
<th>节点值 nodeValue</th>
</tr>
</thead>
<tbody><tr>
<td>元素节点</td>
<td>1</td>
<td>标签名</td>
<td>null</td>
</tr>
<tr>
<td>属性节点</td>
<td>2</td>
<td>属性名</td>
<td>属性值</td>
</tr>
<tr>
<td>文本节点</td>
<td>3</td>
<td>#text</td>
<td>文本</td>
</tr>
<tr>
<td>注释节点</td>
<td>8</td>
<td>#comment</td>
<td>注释的文字</td>
</tr>
<tr>
<td>文档节点</td>
<td>9</td>
<td>#document</td>
<td>null</td>
</tr>
</tbody></table>
<p>通过节点的属性，能够获取到每个节点之间的关系，并且可以通过这种关<br>系，准确快速的获取到相应节点的对象。</p>
<p>获得节点关系的属性</p>
<p>对象.parentNode 获得父节点的引用<br>对象.childNodes 获得子节点的集合<br>对象.firstChild 获得第一个子节点的引用<br>对象.lastChild 获得最后一个子节点的引用<br>对象.nextSibling 获得下一个兄弟节点的引用<br>对象.previousSibling 获得上一个兄弟节点的引用</p>
<h3 id="节点的方法"><a href="#节点的方法" class="headerlink" title="节点的方法"></a>节点的方法</h3><p>我们之前对页面元素的操作，都是在操作现有的元素，那<br>么我们如何动态的创建、删除、更改、复制元素，给元素添<br>加属性、样式呢？就就需要用到我们节点的方法。</p>
<p>一、创建元素节点<br>1&gt;创建空元素节点<br>document.createElement(“元素标签名”);<br>2&gt;创建属性节点<br>对象.setAttribute(属性名,属性值)<br>3&gt;创建文本节点<br>对象.innerHTML=””;</p>
<p>二、追加到页面当中<br>父对象.appendChild(追加的对象)<br>在指定元素节点的最后一个子节点之后添加节点<br>父对象.insertBefore(要插入的对象,之前的对象) 插入到<br>某个对象之前</p>
<p>三、删除节点<br>父对象.removeChild(删除的对象)<br>如果确定要删除节点，最好也清空内存 对象=null;</p>
<p>四、修改(替换)节点<br>父对象.replaceChild(新节点,被修改的节点);</p>
<p>五、复制节点<br>待复制的节点.cloneNode() 方法创建指定节点的副本。<br>该方法有一个参数（true 或 false）。如果设置为true,所有<br>的子节点也会克隆，否则只会克隆本节点。</p>
<h3 id="小练习-5"><a href="#小练习-5" class="headerlink" title="小练习"></a>小练习</h3><p>1.通过节点的属性和方法，通过点击一个按钮，动态的创建<br>一个登录框。</p>
<p>2.通过节点的属性和方法,动态的添加表单的上传控件。</p>
<h3 id="获得元素的位置"><a href="#获得元素的位置" class="headerlink" title="获得元素的位置"></a>获得元素的位置</h3><p>offsetTop offsetLeft<br>返回元素相对于父元素的坐标(left top 值)</p>
<p>1.设定了position 属性</p>
<p>2.没有设定position 属性，指的是元素相对于具有定位<br>属性前辈元素的位置，如果前辈元素也没有定位属性，那么<br>是相对于浏览器窗口的距离</p>
<h3 id="关于元素尺寸的属性"><a href="#关于元素尺寸的属性" class="headerlink" title="关于元素尺寸的属性"></a>关于元素尺寸的属性</h3><p>offsetWidth offsetHeight(数值类型)<br>获得元素实际的高度和宽度(加上边框的宽度)</p>
<p>获得可见区域的高度和宽度</p>
<p>document.documentElement.clientWidth<br>document.documentElement.clientHeight</p>
<h3 id="获得元素的滚动条位置"><a href="#获得元素的滚动条位置" class="headerlink" title="获得元素的滚动条位置"></a>获得元素的滚动条位置</h3><p>获取（设置）具有滚动条元素的属性<br>scrollTop<br>scrollLeft</p>
<p>scrollHeight<br>scrollWidth<br>滚动元素的高度和宽度</p>
<h3 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h3><p>一、什么是事件对象<br>用来记录一些事件发生时的相关的信息的对象<br>1.只有当事件发生的时候才产生，只能在处理函数内部访问</p>
<p>2.处理函数运行结束后自动销毁。</p>
<p>二、如何获取事件对象<br>IE：window.event</p>
<p>FF: 对象.on事件=function (e){}</p>
<h3 id="事件对象的属性"><a href="#事件对象的属性" class="headerlink" title="事件对象的属性"></a>事件对象的属性</h3><p>关于鼠标事件<br>相对于浏览器位置的<br>clientX 当鼠标事件发生的时候，鼠标相对于浏览器左侧的距离<br>clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置<br>相对于事件源的位置</p>
<p>IE:<br>offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置<br>offsetY</p>
<p>FF:<br>layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置<br>layerY 当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置<br>注意：使用layerX和layerY时需要给事件源元素添加定位属性</p>
<p>2.关于键盘事件<br>keyCode 获得键盘码<br>altKey 判断alt键是否被按下，按下是true 反之是false 布尔<br>值，用在keydown事件里<br>ctrlKey<br>shiftKey<br>type 用来检测事件的类型，主要是用于多个事件通用一个事件<br>处理程序的时候</p>
<h3 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h3><p>当页面元素触发事件的时候，该元素的容器以及整个页面都<br>会按照特定顺序响应该元素的触发事件，事件传播的顺序叫<br>做事件流程。<br>事件流的分类</p>
<p>1.冒泡型事件(所有的浏览器都支持)<br>由明确的事件源到最不确定的事件源依次向上触发。</p>
<p>2.捕获型事件(IE不支持 w3c标准 火狐)<br>不确定的事件源到明确的事件源依次向下触发。</p>
<p>阻止事件流(事件对象)<br>IE: 事件对象.cancelBubble=true;</p>
<p>火狐: 事件对象.stopPropagation();<br>获得目标事件源的对象</p>
<p>IE： 事件对象.srcElement</p>
<p>火狐: 事件对象.target</p>
<p>阻止浏览器默认行为<br>IE：事件对象.returnValue = false;</p>
<p>火狐：事件对象.preventDefault();</p>
<h3 id="javascript日期对象"><a href="#javascript日期对象" class="headerlink" title="javascript日期对象"></a>javascript日期对象</h3><p>GMT(Greenwich Mean Time)是格林尼治时间<br>UTC是协调世界时(Universal Time Coordinated)<br>javascript DATE使用UTC(w)1970,1,1,0,0,0,0所经过的毫<br>秒数，之前为负，之后为正。取值范围为285616年。</p>
<p>1.创建日期对象<br>var dateobj=new Date();<br>将会包含本地时间的信息，包括年月日时分秒 星期 时区<br>可传入的参数格式<br>1.“时:分:秒 月/日/年” “月/日/年 时:分:秒” 字符串<br>2.年,月,日,时,分,秒 不能加””<br>注意:不传参的话，会得到当前时间的信息</p>
<p>获取日期信息的方法<br>getFullYear() 获得日期对象中的年份<br>getMonth() 获得日期对象中的月份 (0 ~ 11)<br>getDate() 获得日期对象中的日信息 (1 ~ 31)<br>getHours() 获得日期对象中的小时 (0 ~ 23)<br>getMinutes() 获得日期对象中的分钟 (0 ~ 59)<br>getSeconds() 获得日期对象中的秒数 (0 ~ 59)<br>getDay() 获得日期是周几 (0代表周天，1-6分别代表周1-6)<br>getTime() 获得日期对象中的日期与 1970 年 1 月 1 日相差的毫秒数</p>
<p>设置日期的方法<br>setFullYear() 设置日期对象中的年份（四位数字）。<br>setMonth() 设置日期对象中月份 (0 ~ 11)。<br>setDate() 设置日期对象中月的某一天 (1 ~ 31)。<br>setHours() 设置日期对象中的小时 (0 ~ 23)。<br>setMinutes() 设置日期对象中的分钟 (0 ~ 59)。<br>setSeconds() 设置日期对象中的秒钟 (0 ~ 59)。<br>setTime() 以毫秒设置 Date 对象。</p>
<h3 id="小练习-6"><a href="#小练习-6" class="headerlink" title="小练习"></a>小练习</h3><p>做一个到12月12日12:30的倒计时:<br>n天n时n分n秒</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="JavaScript后盾网实战"><a href="#JavaScript后盾网实战" class="headerlink" title="JavaScript后盾网实战"></a>JavaScript后盾网实战</h2><h3 id="输出工具"><a href="#输出工具" class="headerlink" title="输出工具"></a>输出工具</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">alert(<span class="string">'输出'</span>);</span><br><span class="line"><span class="comment">// 将内容写入body中,内容中的标签会被正常解析</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;h1&gt;页面输出&lt;/h1&gt;"</span>);</span><br><span class="line"><span class="comment">//输入框</span></span><br><span class="line">prompt(<span class="string">'弹出输入框'</span>,<span class="string">'666'</span>);</span><br><span class="line"><span class="comment">// 将信息输出到控制台中</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'后盾人 人人做后盾'</span>);</span><br></pre></td></tr></table></figure>

<h3 id="分号的使用"><a href="#分号的使用" class="headerlink" title="分号的使用"></a>分号的使用</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 分号表示一段功能体的结束</span></span><br><span class="line"><span class="comment">// 如果有换行,可以不用加分号</span></span><br><span class="line"><span class="comment">// 但是,养成一个好的习惯,能加分号的时候一定要加上分号</span></span><br><span class="line">alert(<span class="string">'锄禾日当午'</span>);</span><br><span class="line">alert(<span class="string">'汗滴禾下土'</span>);</span><br><span class="line">alert(<span class="string">'谁知盘中餐'</span>);</span><br><span class="line">alert(<span class="string">'粒粒皆辛苦'</span>);</span><br></pre></td></tr></table></figure>

<h3 id="变量的创建"><a href="#变量的创建" class="headerlink" title="变量的创建"></a>变量的创建</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">			</span><br><span class="line"><span class="comment">// 先声明</span></span><br><span class="line"><span class="comment">// var hd;</span></span><br><span class="line"><span class="comment">// 后赋值</span></span><br><span class="line"><span class="comment">// hd = '变量赋值';</span></span><br><span class="line"><span class="comment">// 变量的调用</span></span><br><span class="line"><span class="comment">// document.write(hd);</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 声明和赋值同时进行</span></span><br><span class="line"><span class="comment">// var hd = '变量赋值';</span></span><br><span class="line"><span class="comment">// alert(hd);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 同时创建多个变量</span></span><br><span class="line"><span class="comment">// var hd,url,year;</span></span><br><span class="line"><span class="comment">// 变量赋值</span></span><br><span class="line"><span class="comment">// hd = '变量赋值';</span></span><br><span class="line"><span class="comment">// url = 'www.houdunren.com';</span></span><br><span class="line"><span class="comment">// year = '2018';</span></span><br><span class="line"><span class="comment">// document.write(hd);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 同时创建多个变量并且赋值</span></span><br><span class="line"><span class="keyword">var</span> hd=<span class="string">'变量hd'</span>,url=<span class="string">'www.houdunren.com'</span>,year=<span class="string">'2018'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(url);</span><br></pre></td></tr></table></figure>

<h3 id="js-命名规范"><a href="#js-命名规范" class="headerlink" title="js 命名规范"></a>js 命名规范</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js严格区分大小写</span></span><br><span class="line"><span class="comment">// var hd = '后盾人';</span></span><br><span class="line"><span class="comment">// document.write(Hd);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 数字不能作为变量名的开头</span></span><br><span class="line"><span class="comment">// var _houdun = '后盾人';</span></span><br><span class="line"><span class="comment">// document.write(_houdun);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// var Var = 'houdun';</span></span><br><span class="line"><span class="comment">// document.write(Var);</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// houdun123</span></span><br><span class="line"><span class="comment">//         123hd</span></span><br><span class="line"><span class="comment">// a</span></span><br><span class="line"><span class="comment">// a_b</span></span><br><span class="line"><span class="comment">// $</span></span><br><span class="line"><span class="comment">// _houdun</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// var studentinfotable;</span></span><br><span class="line"><span class="comment">// var student-info-table;</span></span><br><span class="line"><span class="comment">// var student_info_table;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 驼峰命名法</span></span><br><span class="line"><span class="comment">// var studentInfoTable;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 起名字一定要有意义</span></span><br><span class="line"><span class="comment">// var age = '22';</span></span><br></pre></td></tr></table></figure>

<h3 id="变量重复声明"><a href="#变量重复声明" class="headerlink" title="变量重复声明"></a>变量重复声明</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> hd = <span class="string">'变量hd'</span>;</span><br><span class="line"><span class="comment">// 如果变量被重新声明,但是没有重新赋值,变量的值保持不变.</span></span><br><span class="line"><span class="comment">// var hd;</span></span><br><span class="line"><span class="comment">// 如果变量被重新声明并且重新赋值,原变量会被覆盖</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'houdunren'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br></pre></td></tr></table></figure>

<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果变量被声明,但是没有被赋值,那么就是undefined类型的</span></span><br><span class="line"><span class="keyword">var</span> hd;</span><br><span class="line"><span class="comment">// null表示什么都没有</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'houdunren'</span>.match(<span class="string">'abc'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串：所有被引号标记的数据都叫字符串</span></span><br><span class="line"><span class="comment">// 在js中,单引号和双引号没有任何功能区别</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'变量hd'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数值类型(整型和浮点型)</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">3.1415926</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 布尔值(true 或者 false)</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">3</span>&gt;<span class="number">4</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象</span></span><br><span class="line"><span class="keyword">var</span> hd = &#123;</span><br><span class="line">    name:<span class="string">'后盾人'</span>,</span><br><span class="line">    url:<span class="string">'houdunren.com'</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 检测hd变量的数据类型</span></span><br><span class="line"><span class="keyword">var</span> type = <span class="keyword">typeof</span> hd;</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br><span class="line"><span class="built_in">document</span>.write(type);</span><br></pre></td></tr></table></figure>

<h3 id="字符串拼接"><a href="#字符串拼接" class="headerlink" title="字符串拼接"></a>字符串拼接</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = prompt(<span class="string">'请输入你的姓名'</span>);</span><br><span class="line"><span class="comment">// 1/将变量写到字符串中</span></span><br><span class="line"><span class="comment">// 2/将变量左右两边各切一刀,将变量左右两边变成完整的字符串</span></span><br><span class="line"><span class="comment">// 3/将变量和左右字符串用加号连接</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'亲爱的用户'</span>+name+<span class="string">'你好，欢迎登录！'</span>);</span><br></pre></td></tr></table></figure>

<h3 id="算术运算符"><a href="#算术运算符" class="headerlink" title="算术运算符"></a>算术运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// +加号两边如果都是数字,就表示加法运算</span></span><br><span class="line"><span class="comment">// 如果加号两边有任意一边是字符串,就表示字符串连接</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">1</span>+<span class="string">'2'</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">1</span>+<span class="number">2</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">4.8</span><span class="number">-1.2</span>;</span><br><span class="line"><span class="comment">// 减法/乘法/除法/取余 会进行类型自动转换</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">2</span><span class="number">-1</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">2</span>*<span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">2</span>/<span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">4</span>/<span class="string">'2'</span>;</span><br><span class="line"><span class="comment">// 取余</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">5</span>%<span class="number">3</span>;</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br></pre></td></tr></table></figure>

<h3 id=""><a href="#" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果++在变量后面,比较无私,先参与运算,再自增</span></span><br><span class="line"><span class="comment">// 如果++在变量前面,比较自私,先自增,再参与运算</span></span><br><span class="line">			</span><br><span class="line"><span class="keyword">var</span> x = <span class="number">5</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">6</span> + ++x;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">6</span> + --x;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">6</span> * x--;</span><br><span class="line"><span class="built_in">document</span>.write(x+<span class="string">' | '</span>+hd);</span><br></pre></td></tr></table></figure>

<h3 id="关系运算符"><a href="#关系运算符" class="headerlink" title="关系运算符"></a>关系运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 关系运算符会自动对两边的数据进行类型转换</span></span><br><span class="line"><span class="comment">// 会进行类型转换的运算符:==、&gt;、&lt;、&gt;=、&lt;=、!=</span></span><br><span class="line"><span class="comment">// 不会进行类型转换的运算符:!==、===</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 关系运算的结果是布尔值</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">12</span>&gt;<span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">12</span>&lt;<span class="number">3</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">12</span>&gt;=<span class="number">12</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">12</span>&lt;=<span class="number">11</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'22'</span>&gt;<span class="number">12</span>;</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br><span class="line"></span><br><span class="line"><span class="comment">// == 只判断内容,不管类型</span></span><br><span class="line"><span class="comment">// === 全等,既判断内容,又判断类型</span></span><br><span class="line"><span class="comment">// != 只判断内容,不管类型</span></span><br><span class="line"><span class="comment">// !== 既判断内容,又判断类型</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x = <span class="string">'6'</span>;</span><br><span class="line"><span class="keyword">var</span> y = <span class="number">6</span>;</span><br><span class="line"><span class="keyword">var</span> hd = x==y;<span class="comment">//true			</span></span><br><span class="line"><span class="keyword">var</span> hd = x===y;<span class="comment">//false</span></span><br><span class="line"><span class="keyword">var</span> hd = x!=y;<span class="comment">//true</span></span><br><span class="line"><span class="keyword">var</span> hd = x!==y;<span class="comment">//false</span></span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'a'</span>&lt;<span class="string">'b'</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'张居易'</span>&lt;<span class="string">'李白'</span>;</span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">1</span> &gt; (<span class="number">1</span>&gt;<span class="number">2</span>);</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br></pre></td></tr></table></figure>

<h3 id="逻辑运算符-1"><a href="#逻辑运算符-1" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 与运算(要求左右两边的条件都是true，结果是true)</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">11</span>&gt;<span class="number">2</span> &amp;&amp; <span class="number">3</span>&gt;<span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 或运算(左右两边条件至少有一边是true,结果才是true)</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">11</span>&gt;<span class="number">20</span> || <span class="number">3</span>&gt;<span class="number">21</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 非运算(取反，真的变成假的，假的变成真的)</span></span><br><span class="line"><span class="keyword">var</span> hd = !(<span class="number">2</span>&gt;<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// var hd = 0 &amp;&amp; '后盾人';</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="number">0</span> || <span class="string">'0'</span>;</span><br><span class="line"><span class="keyword">if</span> (hd) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"成立O(∩_∩)O"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"不成立o(╥﹏╥)o"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="赋值运算符-1"><a href="#赋值运算符-1" class="headerlink" title="赋值运算符"></a>赋值运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> hd = <span class="number">5</span>;</span><br><span class="line"><span class="comment">// hd = hd+2;</span></span><br><span class="line"><span class="comment">// 上下两种写法效果一模一样</span></span><br><span class="line"><span class="comment">// hd += 2;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// hd -= 2;</span></span><br><span class="line"><span class="comment">// hd *= 2;</span></span><br><span class="line"><span class="comment">// hd /= 2;</span></span><br><span class="line">hd %= <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br></pre></td></tr></table></figure>

<h3 id="三元运算符-1"><a href="#三元运算符-1" class="headerlink" title="三元运算符"></a>三元运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 三元运算符/三元表达式</span></span><br><span class="line"><span class="comment">// (条件)?条件为真的时候返回的值:条件为假的时候返回的值;</span></span><br><span class="line"><span class="keyword">var</span> age = prompt(<span class="string">'请输入你的年龄'</span>);</span><br><span class="line"><span class="keyword">var</span> hd = (age&gt;=<span class="number">18</span>)?<span class="string">'成年人'</span>:<span class="string">'未成年小朋友'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(hd);</span><br></pre></td></tr></table></figure>

<h3 id="if"><a href="#if" class="headerlink" title="if"></a>if</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">			</span><br><span class="line"><span class="keyword">var</span> grade = prompt(<span class="string">'请输入你的分数'</span>);</span><br><span class="line">			</span><br><span class="line"><span class="comment">// 嵌套分支</span></span><br><span class="line"><span class="keyword">if</span> (grade&gt;=<span class="number">60</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> () &#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">			</span><br><span class="line"><span class="comment">// 多路分支</span></span><br><span class="line"><span class="keyword">if</span> (grade&gt;=<span class="number">90</span>) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"火云学神"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(grade&gt;=<span class="number">80</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"学霸"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(grade&gt;=<span class="number">70</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"学的还行"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(grade&gt;=<span class="number">60</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"学痞"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(grade&gt;=<span class="number">30</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"学渣"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>(grade&gt;=<span class="number">10</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"学渣渣"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"开心就好~"</span>);</span><br><span class="line">&#125;</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line"><span class="comment">// 单路分支</span></span><br><span class="line"><span class="keyword">if</span> (grade&gt;=<span class="number">60</span>) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">'及格了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 双路分支</span></span><br><span class="line"><span class="keyword">if</span> (grade&gt;=<span class="number">60</span>) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">'及格了'</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"不及格"</span>);</span><br></pre></td></tr></table></figure>

<h3 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// switch如果判断成功,会执行对应的代码,以及他后面的判断,不再判断,直接执行相关代码</span></span><br><span class="line"><span class="comment">// case判断的时候,要求所对比的数据和待对比的值,内容和类型一样</span></span><br><span class="line"><span class="comment">// prompt接收到的结果是字符串类型</span></span><br><span class="line">			</span><br><span class="line"><span class="keyword">var</span> gift = prompt(<span class="string">'请输入你的奖品序号'</span>)*<span class="number">1</span>;</span><br><span class="line"><span class="keyword">switch</span>(gift)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">'iphone手机'</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"宝马汽车"</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"六个苹果"</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"一台平板电脑"</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"请认真输入"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="自定义运算"><a href="#自定义运算" class="headerlink" title="自定义运算"></a>自定义运算</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = prompt(<span class="string">'请输入第一个数字'</span>)*<span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> charset = prompt(<span class="string">'请输入运算符+-*/'</span>);</span><br><span class="line"><span class="keyword">var</span> y = prompt(<span class="string">'请输入第二个数字'</span>)*<span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">switch</span>(charset)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'+'</span>:</span><br><span class="line">        <span class="keyword">var</span> result = x+y;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'-'</span>:</span><br><span class="line">        <span class="keyword">var</span> result = x-y;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'*'</span>:</span><br><span class="line">        <span class="keyword">var</span> result = x*y;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'/'</span>:</span><br><span class="line">        <span class="keyword">var</span> result = x/y;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">var</span> result = <span class="string">'你输入的有误'</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="for循环"><a href="#for循环" class="headerlink" title="for循环"></a>for循环</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">			</span><br><span class="line"><span class="comment">// for (定义计数器;成立条件;计数器变化) &#123;</span></span><br><span class="line"><span class="comment">//     循环体代码</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// 循环一定要有结尾</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;=<span class="number">100</span>;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="双层for循环"><a href="#双层for循环" class="headerlink" title="双层for循环"></a>双层for循环</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1/看是否是死循环</span></span><br><span class="line"><span class="comment">// 2/看执行次数</span></span><br><span class="line"><span class="comment">// 3/看每次都执行了什么(每次都干啥了)</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(i+<span class="string">'、'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">20</span>;i&gt;<span class="number">10</span>;i--) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"*"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">31</span>;i&lt;=<span class="number">45</span>;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">'i'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 里外层循环的计数器变量不能重名</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++) &#123;</span><br><span class="line">    <span class="comment">// 输出十个心</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;<span class="number">10</span>;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++) &#123;</span><br><span class="line">    <span class="comment">// 输出十个心</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;i;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="直角三角形效果"><a href="#直角三角形效果" class="headerlink" title="直角三角形效果"></a>直角三角形效果</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 直角三角形效果</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++) &#123;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;=i;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">			</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">5</span>;i&gt;<span class="number">0</span>;i--) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;i;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="九九乘法表"><a href="#九九乘法表" class="headerlink" title="九九乘法表"></a>九九乘法表</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=<span class="number">9</span>;i++) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">1</span>;j&lt;=i;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(j+<span class="string">"*"</span>+i+<span class="string">"="</span>+i*j+<span class="string">"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="金字塔效果"><a href="#金字塔效果" class="headerlink" title="金字塔效果"></a>金字塔效果</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rows = prompt(<span class="string">'请输入行数'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=rows;i++) &#123;</span><br><span class="line">    <span class="comment">// 输出  总行数-i  个☆</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> x = <span class="number">0</span>;x&lt;rows-i;x++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"☆"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 输出  当前行数*2-1  个★</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> y=<span class="number">0</span>;y&lt;i*<span class="number">2</span><span class="number">-1</span>;y++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"★"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 换行</span></span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="自定义行列数的隔行变色表格"><a href="#自定义行列数的隔行变色表格" class="headerlink" title="自定义行列数的隔行变色表格"></a>自定义行列数的隔行变色表格</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// document.write("后");</span></span><br><span class="line"><span class="comment">// document.write("盾");</span></span><br><span class="line"><span class="comment">// document.write("人");</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> rows = prompt(<span class="string">'请输入行数'</span>);</span><br><span class="line"><span class="keyword">var</span> cols = prompt(<span class="string">'请输入列数'</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">js的字符串中不能换行</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;table border='1'&gt;"</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=rows;i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (i%<span class="number">2</span>==<span class="number">1</span>) &#123;<span class="comment">//奇数行</span></span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"&lt;tr class='hd'&gt;"</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"&lt;tr&gt;"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">1</span>;j&lt;=cols;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"&lt;td&gt;"</span>+i+<span class="string">"行"</span>+j+<span class="string">"列&lt;/td&gt;"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;/tr&gt;"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;/table&gt;"</span>);</span><br></pre></td></tr></table></figure>

<h3 id="while循环"><a href="#while循环" class="headerlink" title="while循环"></a>while循环</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// while(饿)&#123;</span></span><br><span class="line"><span class="comment">//     吃一口</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// for循环一般指定具体的次数</span></span><br><span class="line"><span class="comment">// while循环一般不指定具体次数</span></span><br><span class="line"><span class="comment">// 但是,不论什么循环,一定是要有结尾的,否则就是死循环</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span>(age&lt;=<span class="number">50</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(age+<span class="string">"岁领一万块钱&lt;br /&gt;"</span>);</span><br><span class="line">    age++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="do-whild循环"><a href="#do-whild循环" class="headerlink" title="do whild循环"></a>do whild循环</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">68</span>;</span><br><span class="line"><span class="keyword">while</span>(age&lt;=<span class="number">50</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(age+<span class="string">"岁领一万块钱&lt;br /&gt;"</span>);</span><br><span class="line">    age++;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// while循环是先判断后执行</span></span><br><span class="line"><span class="comment">// do while循环是先执行一次,然后再判断</span></span><br><span class="line"><span class="keyword">do</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(age+<span class="string">"岁领一万块钱&lt;br /&gt;"</span>);</span><br><span class="line">    age++;</span><br><span class="line">&#125;<span class="keyword">while</span>(age&lt;=<span class="number">50</span>)</span><br></pre></td></tr></table></figure>

<h3 id="break和continue"><a href="#break和continue" class="headerlink" title="break和continue"></a>break和continue</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">18</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span>(age&lt;=<span class="number">50</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span> (age==<span class="number">25</span>) &#123;</span><br><span class="line">        age++;</span><br><span class="line">        <span class="keyword">continue</span>;<span class="comment">//跳出本次循环体后续代码，直接进入下次循环判断</span></span><br><span class="line">        <span class="keyword">break</span>;<span class="comment">//结束掉整个循环</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(age+<span class="string">"岁领一万块钱&lt;br /&gt;"</span>);</span><br><span class="line">    age++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="函数-1"><a href="#函数-1" class="headerlink" title="函数"></a>函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sanjiao</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (j=<span class="number">0</span>;j&lt;=i;j++) &#123;</span><br><span class="line">            <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">    &#125;	</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字面量的形式声明函数</span></span><br><span class="line"><span class="keyword">var</span> sanjiao = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">5</span>;i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (j=<span class="number">0</span>;j&lt;=i;j++) &#123;</span><br><span class="line">            <span class="built_in">document</span>.write(<span class="string">"❤"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数里面的代码在被调用的时候才会被执行.</span></span><br><span class="line"><span class="comment">// 运行函数/执行函数/调用函数</span></span><br><span class="line">sanjiao();</span><br><span class="line"></span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line">sanjiao();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:写一个函数,调用这个函数,就输出一个金字塔形状</span></span><br></pre></td></tr></table></figure>

<h3 id="带参数的函数1"><a href="#带参数的函数1" class="headerlink" title="带参数的函数1"></a>带参数的函数1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1/明确函数的功能(你想干啥)</span></span><br><span class="line"><span class="comment">// 2/声明函数</span></span><br><span class="line"><span class="comment">// 3/分析需要的参数(原料)</span></span><br><span class="line"><span class="comment">// 4/构建函数功能流程</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建函数时传入的没有实际值的变量叫形参</span></span><br><span class="line"><span class="comment">// 调用函数的时候,传入的具体值,叫实参</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pf</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = x*x;</span><br><span class="line">    alert(result);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pf(<span class="number">5</span>);</span><br><span class="line">pf(<span class="number">123</span>);</span><br></pre></td></tr></table></figure>

<h3 id="带参数的函数2"><a href="#带参数的函数2" class="headerlink" title="带参数的函数2"></a>带参数的函数2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = x+y;</span><br><span class="line">    alert(result);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add(<span class="number">123</span>,<span class="number">321</span>);</span><br><span class="line">add(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:写一个函数,计算三个数字的乘积</span></span><br></pre></td></tr></table></figure>

<h3 id="return"><a href="#return" class="headerlink" title="return"></a>return</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cj</span>(<span class="params">x,y,z</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = x*y*z;</span><br><span class="line">    <span class="comment">// 一般来讲,函数的结果要用return返回回来</span></span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> r1 = cj(<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>);</span><br><span class="line"><span class="built_in">console</span>.log(r1);</span><br><span class="line"><span class="keyword">var</span> r2 = cj(<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>);</span><br><span class="line"><span class="built_in">document</span>.write(r2);</span><br></pre></td></tr></table></figure>

<h3 id="return-2"><a href="#return-2" class="headerlink" title="return 2"></a>return 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数在执行过程中,如果遇到return,就表示函数结束了，后续的代码就不会再执行了</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cj</span>(<span class="params">x,y,z</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = x*y*z;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">    alert(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> r1 = cj(<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>);</span><br><span class="line"><span class="built_in">console</span>.log(r1);</span><br></pre></td></tr></table></figure>

<h3 id="变量作用域"><a href="#变量作用域" class="headerlink" title="变量作用域"></a>变量作用域</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 局部变量:在函数内部,用var声明的变量,叫做局部变量</span></span><br><span class="line"><span class="comment">// 全局变量:不是局部变量,就一定是全局变量</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="string">'后盾人'</span>;<span class="comment">//全局变量</span></span><br><span class="line"><span class="comment">// 局部变量会在函数执行完毕后销毁</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> url = <span class="string">'www.houdunren.com'</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(hd);</span><br><span class="line">    <span class="built_in">console</span>.log(url);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo();</span><br><span class="line"><span class="built_in">console</span>.log(hd);</span><br><span class="line"><span class="built_in">console</span>.log(url);</span><br></pre></td></tr></table></figure>

<h3 id="Number"><a href="#Number" class="headerlink" title="Number"></a>Number</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var result = Number('123.456');</span></span><br><span class="line"><span class="comment">// var result = Number(1&gt;2);</span></span><br><span class="line"><span class="comment">// var result = Number(3.1415926000000000000);</span></span><br><span class="line"><span class="comment">// var houdun;</span></span><br><span class="line"><span class="comment">// var result = Number(houdun);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// var result = Number('0000000001.230000000000000');</span></span><br><span class="line"><span class="comment">// var result = Number('');</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Number</span>(<span class="string">'后盾人'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> result);</span><br></pre></td></tr></table></figure>

<h3 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat"></a>parseFloat</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var result = parseFloat('0001.230000');</span></span><br><span class="line"><span class="comment">// var result = parseFloat('5');</span></span><br><span class="line"><span class="comment">// var result = parseFloat(5);</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">parseFloat</span>(<span class="string">'后盾人'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> result);</span><br></pre></td></tr></table></figure>

<h3 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt"></a>parseInt</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// parseInt将数据的整数部分提取出来</span></span><br><span class="line"><span class="comment">// var result = parseInt('0000123.93300000');</span></span><br><span class="line"><span class="comment">// var result = parseInt('66px');</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 第二个参数表示第一个参数的进制</span></span><br><span class="line"><span class="comment">// 将8进制的123转成十进制数字</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">parseInt</span>(<span class="number">123</span>,<span class="number">8</span>);</span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> result);</span><br></pre></td></tr></table></figure>

<h3 id="isNaN-1"><a href="#isNaN-1" class="headerlink" title="isNaN"></a>isNaN</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// isNaN用来判断数据是否 不能转成数字</span></span><br><span class="line"><span class="comment">// 不能转成数字,返回true</span></span><br><span class="line"><span class="comment">// 能转成数字,返回false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// var result = isNaN('123');</span></span><br><span class="line"><span class="comment">// var result = isNaN('后盾人');</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">isNaN</span>(<span class="number">666</span>);</span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br></pre></td></tr></table></figure>

<h3 id="eval-1"><a href="#eval-1" class="headerlink" title="eval"></a>eval</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// eval用js语法解析字符串的内容</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'1+1'</span>;</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">eval</span>(str);</span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br></pre></td></tr></table></figure>

<h3 id="自定义运行"><a href="#自定义运行" class="headerlink" title="自定义运行"></a>自定义运行</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = prompt(<span class="string">'请输入第一个数字'</span>);</span><br><span class="line"><span class="keyword">var</span> charset = prompt(<span class="string">'请输入运算符+-*/'</span>);</span><br><span class="line"><span class="keyword">var</span> y = prompt(<span class="string">'请输入第二个数字'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(x+charset+y);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">eval</span>(x+charset+y);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(result);</span><br></pre></td></tr></table></figure>

<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组里的每一个数据都是独立的</span></span><br><span class="line"><span class="comment">// 数组里每个数据可以是任意合法类型</span></span><br><span class="line"><span class="comment">// 数组中的元素序号（下标）从0开始</span></span><br><span class="line"><span class="comment">// 数组是数据存储方式,其数据类型是对象object</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 隐式声明数组</span></span><br><span class="line"><span class="comment">// var fruits = ['苹果','鸭梨','香蕉','西瓜','桔子','葡萄'];</span></span><br><span class="line"><span class="comment">// document.write(typeof fruits);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过构造函数创建数组</span></span><br><span class="line"><span class="keyword">var</span> fruits = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line"><span class="comment">// document.write(fruits[2]);</span></span><br><span class="line"><span class="comment">// 重新赋值数组元素</span></span><br><span class="line">fruits[<span class="number">2</span>] = <span class="string">'火龙果'</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br></pre></td></tr></table></figure>

<h3 id="数组特点"><a href="#数组特点" class="headerlink" title="数组特点"></a>数组特点</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组可以先创建再赋值</span></span><br><span class="line"><span class="keyword">var</span> fruits = [];</span><br><span class="line"><span class="keyword">var</span> fruits = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line">fruits[<span class="number">0</span>] = <span class="string">'苹果'</span>;</span><br><span class="line">fruits[<span class="number">1</span>] = <span class="string">'桔子'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="comment">// 数组长度</span></span><br><span class="line"><span class="comment">// document.write(fruits.length);</span></span><br><span class="line"><span class="comment">// 往数组最后追加元素</span></span><br><span class="line">fruits[fruits.length] = <span class="string">'火龙果'</span>;</span><br><span class="line">fruits[fruits.length] = <span class="string">'榴莲'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br></pre></td></tr></table></figure>

<h3 id="数组遍历"><a href="#数组遍历" class="headerlink" title="数组遍历"></a>数组遍历</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="comment">// 数组遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;fruits.length;i++) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(fruits[i]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">document</span>.write(fruits[<span class="number">0</span>]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(fruits[<span class="number">1</span>]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(fruits[<span class="number">2</span>]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(fruits[<span class="number">3</span>]+<span class="string">'很好吃&lt;br /&gt;'</span>);</span><br><span class="line"><span class="comment">// 写一个函数,传入一个数组,返回数组的最大值</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">56</span>,<span class="number">23</span>,<span class="number">6</span>,<span class="number">43</span>,<span class="number">87</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">55</span>];</span><br><span class="line"><span class="keyword">var</span> result = max(arr);</span><br></pre></td></tr></table></figure>

<h3 id="二维数组"><a href="#二维数组" class="headerlink" title="二维数组"></a>二维数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 山东 北京 上海 重庆  四川</span></span><br><span class="line"><span class="keyword">var</span> jingdian = [</span><br><span class="line">    [<span class="string">'泰山'</span>,<span class="string">'水泊梁山'</span>,<span class="string">'三孔'</span>,<span class="string">'青岛海滩'</span>,<span class="string">'大明湖'</span>],</span><br><span class="line">    [<span class="string">'天安门'</span>,<span class="string">'天坛'</span>,<span class="string">'长城'</span>,<span class="string">'故宫'</span>,<span class="string">'地坛'</span>,<span class="string">'鸟巢'</span>],</span><br><span class="line">    [<span class="string">'城隍庙'</span>,<span class="string">'迪士尼'</span>,<span class="string">'外滩'</span>],</span><br><span class="line">    [<span class="string">'洪崖洞'</span>,<span class="string">'磁器口古镇'</span>,<span class="string">'解放碑'</span>,<span class="string">'长江索道'</span>],</span><br><span class="line">    [<span class="string">'九寨沟'</span>,<span class="string">'峨眉山'</span>,<span class="string">'乐山大佛'</span>]</span><br><span class="line">];</span><br><span class="line"><span class="built_in">document</span>.write(jingdian.length);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">2</span>]);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">2</span>][<span class="number">0</span>]);</span><br></pre></td></tr></table></figure>

<h3 id="二维数组-1"><a href="#二维数组-1" class="headerlink" title="二维数组"></a>二维数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 山东 北京 上海 重庆  四川</span></span><br><span class="line"><span class="keyword">var</span> jingdian = [</span><br><span class="line">    [<span class="string">'泰山'</span>,<span class="string">'水泊梁山'</span>,<span class="string">'三孔'</span>,<span class="string">'青岛海滩'</span>,<span class="string">'大明湖'</span>],</span><br><span class="line">    [<span class="string">'天安门'</span>,<span class="string">'天坛'</span>,<span class="string">'长城'</span>,<span class="string">'故宫'</span>,<span class="string">'地坛'</span>,<span class="string">'鸟巢'</span>],</span><br><span class="line">    [<span class="string">'城隍庙'</span>,<span class="string">'迪士尼'</span>,<span class="string">'外滩'</span>],</span><br><span class="line">    [<span class="string">'洪崖洞'</span>,<span class="string">'磁器口古镇'</span>,<span class="string">'解放碑'</span>,<span class="string">'长江索道'</span>],</span><br><span class="line">    [<span class="string">'九寨沟'</span>,<span class="string">'峨眉山'</span>,<span class="string">'乐山大佛'</span>]</span><br><span class="line">];</span><br><span class="line">    </span><br><span class="line"><span class="comment">// 遍历二维数组</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;jingdian.length;i++) &#123;</span><br><span class="line">    <span class="comment">// 循环jingdian[i]数组</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;jingdian[i].length;j++) &#123;</span><br><span class="line">        <span class="built_in">document</span>.write(jingdian[i][j]+<span class="string">'很好玩、'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line">&#125;</span><br><span class="line">				</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">0</span>][<span class="number">0</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">0</span>][<span class="number">1</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">0</span>][<span class="number">2</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">0</span>][<span class="number">3</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">0</span>][<span class="number">4</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">0</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">1</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">2</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">3</span>]+<span class="string">'很好玩、'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(jingdian[<span class="number">1</span>][<span class="number">4</span>]+<span class="string">'很好玩、'</span>);</span><br></pre></td></tr></table></figure>

<h3 id="取数组最大值"><a href="#取数组最大值" class="headerlink" title="取数组最大值"></a>取数组最大值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">max</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = arr[<span class="number">0</span>];</span><br><span class="line">    <span class="comment">// 循环数组</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++) &#123;</span><br><span class="line">        <span class="comment">// 如果arr[i]大于x,就让x存储arr[i]</span></span><br><span class="line">        <span class="keyword">if</span> (arr[i]&gt;x) &#123;</span><br><span class="line">            x = arr[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sz = [<span class="number">1</span>,<span class="number">56</span>,<span class="number">213</span>,<span class="number">6</span>,<span class="number">43</span>,<span class="number">87</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">55</span>];</span><br><span class="line"><span class="keyword">var</span> result = max(sz);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="获得最长的二维数组子数组的序号"><a href="#获得最长的二维数组子数组的序号" class="headerlink" title="获得最长的二维数组子数组的序号"></a>获得最长的二维数组子数组的序号</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">max</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">0</span>;<span class="comment">//x用来存储长度最长的子数组序号</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (arr[i].length&gt;arr[x].length) &#123;</span><br><span class="line">            x = i;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> jingdian = [</span><br><span class="line">    [<span class="string">'泰山'</span>,<span class="string">'水泊梁山'</span>,<span class="string">'三孔'</span>,<span class="string">'青岛海滩'</span>,<span class="string">'大明湖'</span>],</span><br><span class="line">    [<span class="string">'天安门'</span>,<span class="string">'天坛'</span>,<span class="string">'长城'</span>,<span class="string">'故宫'</span>,<span class="string">'地坛'</span>,<span class="string">'鸟巢'</span>],</span><br><span class="line">    [<span class="string">'城隍庙'</span>,<span class="string">'迪士尼'</span>,<span class="string">'外滩'</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>],</span><br><span class="line">    [<span class="string">'洪崖洞'</span>,<span class="string">'磁器口古镇'</span>,<span class="string">'解放碑'</span>,<span class="string">'长江索道'</span>],</span><br><span class="line">    [<span class="string">'九寨沟'</span>,<span class="string">'峨眉山'</span>,<span class="string">'乐山大佛'</span>]</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = max(jingdian);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="对象-1"><a href="#对象-1" class="headerlink" title="对象"></a>对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对象是很多属性(变量)和方法(函数)的结合</span></span><br><span class="line"><span class="comment">// 对象中的属性和方法之间是用逗号隔开</span></span><br><span class="line"><span class="comment">// 原生形式创建对象(json形式创建对象)</span></span><br><span class="line"><span class="keyword">var</span> auas = &#123;</span><br><span class="line">    price:<span class="string">'8000元'</span>,</span><br><span class="line">    size:<span class="string">'15.6寸'</span>,</span><br><span class="line">    weight:<span class="string">'3kg'</span>,</span><br><span class="line">    color:<span class="string">'黑色'</span>,</span><br><span class="line">    game:<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'玩游戏'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    chat:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'聊天'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(<span class="keyword">typeof</span> auas);</span><br><span class="line"><span class="comment">// 修改属性</span></span><br><span class="line">auas.color = <span class="string">'红色'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(auas.color);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:写一个对象,创建一辆跑车</span></span><br></pre></td></tr></table></figure>

<h3 id="构造函数创建对象"><a href="#构造函数创建对象" class="headerlink" title="构造函数创建对象"></a>构造函数创建对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 构造函数(类)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ren</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = <span class="string">'名字'</span>;</span><br><span class="line">    <span class="keyword">this</span>.sex = <span class="string">'性别'</span>;</span><br><span class="line">    <span class="keyword">this</span>.height = <span class="string">'身高'</span>;</span><br><span class="line">    <span class="keyword">this</span>.weight = <span class="string">'体重'</span>;</span><br><span class="line">    <span class="keyword">this</span>.look = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'能看见东西'</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">this</span>.run = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'能跑'</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过构造函数实例化具体对象</span></span><br><span class="line"><span class="keyword">var</span> xiawa = <span class="keyword">new</span> ren();</span><br><span class="line">xiawa.name = <span class="string">'夏娃'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(xiawa.name);</span><br><span class="line">xiawa.sex = <span class="string">'女孩'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(xiawa.sex);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> yadang = <span class="keyword">new</span> ren();</span><br><span class="line">yadang.name = <span class="string">'亚当'</span>;</span><br><span class="line"><span class="comment">// 执行对象里的方法</span></span><br><span class="line">yadang.run();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 追加新属性和新方法</span></span><br><span class="line">yadang.wenshen = <span class="string">'两只皮皮虾'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(yadang.wenshen);</span><br><span class="line">yadang.tree = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'会爬树'</span>);</span><br><span class="line">&#125;</span><br><span class="line">yadang.tree();</span><br></pre></td></tr></table></figure>

<h3 id="对象属性和方法的获得"><a href="#对象属性和方法的获得" class="headerlink" title="对象属性和方法的获得"></a>对象属性和方法的获得</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> auas = &#123;</span><br><span class="line">    price:<span class="string">'8000元'</span>,</span><br><span class="line">    size:<span class="string">'15.6寸'</span>,</span><br><span class="line">    weight:<span class="string">'3kg'</span>,</span><br><span class="line">    color:<span class="string">'黑色'</span>,</span><br><span class="line">    game:<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'玩游戏'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    chat:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'聊天'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(auas.color);</span><br><span class="line"><span class="built_in">document</span>.write(auas[<span class="string">'color'</span>]);</span><br><span class="line"></span><br><span class="line">auas.chat();</span><br><span class="line">auas[<span class="string">'chat'</span>]();</span><br></pre></td></tr></table></figure>

<h3 id="遍历对象"><a href="#遍历对象" class="headerlink" title="遍历对象"></a>遍历对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> auas = &#123;</span><br><span class="line">    price:<span class="string">'8000元'</span>,</span><br><span class="line">    size:<span class="string">'15.6寸'</span>,</span><br><span class="line">    weight:<span class="string">'3kg'</span>,</span><br><span class="line">    color:<span class="string">'黑色'</span>,</span><br><span class="line">    game:<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'玩游戏'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    chat:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'聊天'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// x表示当前遍历到的属性的属性名字字符串形式</span></span><br><span class="line"><span class="keyword">for</span> (x <span class="keyword">in</span> auas) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(x+<span class="string">'=&gt;'</span>+auas[x]+<span class="string">'&lt;br /&gt;'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="删除对象属性或方法"><a href="#删除对象属性或方法" class="headerlink" title="删除对象属性或方法"></a>删除对象属性或方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> auas = &#123;</span><br><span class="line">    price:<span class="string">'8000元'</span>,</span><br><span class="line">    size:<span class="string">'15.6寸'</span>,</span><br><span class="line">    weight:<span class="string">'3kg'</span>,</span><br><span class="line">    color:<span class="string">'黑色'</span>,</span><br><span class="line">    game:<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'玩游戏'</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    chat:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'聊天'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(auas.price);</span><br><span class="line"><span class="comment">// 删除对象属性</span></span><br><span class="line"><span class="keyword">delete</span> auas.price;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(auas.price);</span><br></pre></td></tr></table></figure>

<h3 id="数组对象splice"><a href="#数组对象splice" class="headerlink" title="数组对象splice"></a>数组对象splice</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="comment">// 获得数组长度</span></span><br><span class="line"><span class="built_in">document</span>.write(fruits.length);</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 向数组最后追加元素</span></span><br><span class="line">fruits.push(<span class="string">'火龙果'</span>,<span class="string">'椰子'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 向数组的开头追加元素</span></span><br><span class="line">fruits.unshift(<span class="string">'火龙果'</span>,<span class="string">'椰子'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 删除数组最后的一个元素</span></span><br><span class="line">fruits.pop();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 删除数组第一个元素</span></span><br><span class="line">fruits.shift();</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br></pre></td></tr></table></figure>

<h3 id="数组对象-1"><a href="#数组对象-1" class="headerlink" title="数组对象 1"></a>数组对象 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;br /&gt;"</span>);</span><br><span class="line"><span class="comment">// 第一个参数表示开始删除或追加的位置</span></span><br><span class="line"><span class="comment">// 第二个参数表示删除的个数</span></span><br><span class="line">fruits.splice(<span class="number">2</span>,<span class="number">3</span>);</span><br><span class="line">fruits.splice(<span class="number">2</span>,<span class="number">3</span>,<span class="string">'椰子'</span>,<span class="string">'火龙果'</span>);</span><br><span class="line">fruits.splice(<span class="number">2</span>,<span class="number">1</span>);</span><br><span class="line">fruits.splice(<span class="number">4</span>,<span class="number">0</span>,<span class="string">'椰子'</span>,<span class="string">'火龙果'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(fruits);</span><br></pre></td></tr></table></figure>

<h3 id="数组对象-2"><a href="#数组对象-2" class="headerlink" title="数组对象 2"></a>数组对象 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="comment">// unshift push shift pop splice都属于破坏性操作</span></span><br><span class="line"><span class="comment">// slice是非破坏性操作</span></span><br><span class="line"><span class="comment">// slice截取的时候,包含开始,不包含结束</span></span><br><span class="line"><span class="keyword">var</span> result = fruits.slice(<span class="number">1</span>,<span class="number">4</span>);</span><br><span class="line"><span class="keyword">var</span> result = fruits.slice(<span class="number">1</span>,);</span><br><span class="line"><span class="comment">// 负数表示倒数第几个,比如 -1就是表示倒数第一个</span></span><br><span class="line"><span class="keyword">var</span> result = fruits.slice(<span class="number">1</span>,<span class="number">-1</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="数组对象-3"><a href="#数组对象-3" class="headerlink" title="数组对象 3"></a>数组对象 3</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="comment">// 将数组转成字符串</span></span><br><span class="line"><span class="keyword">var</span> result = fruits.join(<span class="string">''</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="数组对象-4"><a href="#数组对象-4" class="headerlink" title="数组对象 4"></a>数组对象 4</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'苹果'</span>,<span class="string">'鸭梨'</span>,<span class="string">'香蕉'</span>,<span class="string">'西瓜'</span>,<span class="string">'桔子'</span>,<span class="string">'葡萄'</span>];</span><br><span class="line"><span class="keyword">var</span> jingdian = [<span class="string">'天安门'</span>,<span class="string">'故宫'</span>,<span class="string">'长城'</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// 连接数组</span></span><br><span class="line"><span class="comment">// var result = fruits.concat(jingdian);</span></span><br><span class="line"><span class="keyword">var</span> result = fruits.concat(fruits);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br><span class="line">			</span><br><span class="line">			</span><br><span class="line"><span class="comment">// 作业:写一个函数,传入一个数组,返回数组去重复之后的效果</span></span><br><span class="line"><span class="comment">// var arr = ['a','b','c','a','a','a','d','e','c','f','d'];</span></span><br><span class="line"><span class="comment">// var result = foo(arr);</span></span><br></pre></td></tr></table></figure>

<h3 id="数组去重复效果-1"><a href="#数组去重复效果-1" class="headerlink" title="数组去重复效果 1"></a>数组去重复效果 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++) &#123;</span><br><span class="line">        <span class="comment">// document.write("让"+i+"号元素去跟它后面的所有元素进行对比，如果一样，就删掉后面的元素&lt;br /&gt;");</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j=i+<span class="number">1</span>;j&lt;arr.length;j++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (arr[j] === arr[i]) &#123;</span><br><span class="line">                <span class="comment">// 删掉j号元素</span></span><br><span class="line">                arr.splice(j,<span class="number">1</span>);</span><br><span class="line">                j--;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> hd = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>,<span class="string">'a'</span>,<span class="string">'a'</span>,<span class="string">'a'</span>,<span class="string">'d'</span>,<span class="string">'e'</span>,<span class="string">'c'</span>,<span class="string">'f'</span>,<span class="string">'d'</span>];</span><br><span class="line"><span class="keyword">var</span> result = unique(hd);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="数组去重复效果-2"><a href="#数组去重复效果-2" class="headerlink" title="数组去重复效果 2"></a>数组去重复效果 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;arr.length;i++) &#123;</span><br><span class="line">        obj[arr[i]] = <span class="string">'hd'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> result = [];</span><br><span class="line">    <span class="comment">// 循环,将obj的属性名提取出来</span></span><br><span class="line">    <span class="keyword">for</span> (x <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        result.push(x);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> hd = [<span class="string">'a'</span>,<span class="number">5</span>,<span class="string">'b'</span>,<span class="string">'c'</span>,<span class="string">'a'</span>,<span class="string">'a'</span>,<span class="string">'a'</span>,<span class="string">'d'</span>,<span class="string">'e'</span>,<span class="string">'c'</span>,<span class="string">'f'</span>,<span class="string">'d'</span>];</span><br><span class="line"><span class="keyword">var</span> result = unique(hd);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="字符串类型"><a href="#字符串类型" class="headerlink" title="字符串类型"></a>字符串类型</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="built_in">document</span>.write(arr.constructor);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> url = <span class="string">'后盾人www.houdunren.com'</span>;</span><br><span class="line"><span class="comment">// 字符串长度</span></span><br><span class="line"><span class="built_in">document</span>.write(url.length);</span><br><span class="line"><span class="built_in">document</span>.write(url[<span class="number">5</span>]);</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(url.constructor);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获得4号位置上的字符</span></span><br><span class="line"><span class="keyword">var</span> result = url.charAt(<span class="number">4</span>);</span><br><span class="line"><span class="comment">// 获得4号位置上字符的Unicode编码</span></span><br><span class="line"><span class="keyword">var</span> result = url.charCodeAt(<span class="number">4</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将Unicode编码转成原始字符</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">String</span>.fromCharCode(<span class="number">119</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'www.houdunren.com'</span>;</span><br><span class="line"><span class="comment">// 获得ou在字符串中首次出现的位置</span></span><br><span class="line"><span class="keyword">var</span> result = str.indexOf(<span class="string">'ou'</span>);</span><br><span class="line"><span class="keyword">var</span> result = str.indexOf(<span class="string">'u'</span>);</span><br><span class="line"><span class="comment">// 获得u在字符串中最后一次出现的位置</span></span><br><span class="line"><span class="keyword">var</span> result = str.lastIndexOf(<span class="string">'u'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-1"><a href="#字符串对象-1" class="headerlink" title="字符串对象 1"></a>字符串对象 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'www.houdunren.com'</span>;</span><br><span class="line"><span class="comment">// 如果能搜索到,返回搜搜索的内容</span></span><br><span class="line"><span class="comment">// 如果没有搜索到,返回null</span></span><br><span class="line"><span class="keyword">var</span> result = str.match(<span class="string">'un'</span>);</span><br><span class="line"><span class="keyword">if</span>(result)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"搜索到了"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"没有搜索到"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-2"><a href="#字符串对象-2" class="headerlink" title="字符串对象 2"></a>字符串对象 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服'</span>;</span><br><span class="line"><span class="comment">// replace 只替换搜多到的第一个字符串</span></span><br><span class="line"><span class="keyword">var</span> result = str.replace(<span class="string">'后盾人'</span>,<span class="string">'***'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-3"><a href="#字符串对象-3" class="headerlink" title="字符串对象 3"></a>字符串对象 3</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// while(字符串中有后盾人)&#123;</span></span><br><span class="line"><span class="comment">//     将第一个后盾人替换成***</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span>(str.match(<span class="string">'后盾人'</span>))&#123;</span><br><span class="line">    str = str.replace(<span class="string">'后盾人'</span>,<span class="string">'***'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(str);</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-4"><a href="#字符串对象-4" class="headerlink" title="字符串对象 4"></a>字符串对象 4</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'houdunren.com'</span>;</span><br><span class="line"><span class="comment">// var result = str.slice(3,6);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 从3号开始,截取3个字符</span></span><br><span class="line"><span class="keyword">var</span> result = str.substr(<span class="number">3</span>,<span class="number">3</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-5"><a href="#字符串对象-5" class="headerlink" title="字符串对象 5"></a>字符串对象 5</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'后盾人培训-后盾人在线学习-后盾人QQ群-后盾人客服'</span>;</span><br><span class="line"><span class="comment">// 将字符串转换成数组</span></span><br><span class="line"><span class="keyword">var</span> result = str.split(<span class="string">'盾'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="字符串对象-6"><a href="#字符串对象-6" class="headerlink" title="字符串对象 6"></a>字符串对象 6</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'HouDunRen'</span>;</span><br><span class="line"><span class="comment">// 大小写的转换</span></span><br><span class="line"><span class="built_in">document</span>.write(str.toLowerCase());</span><br><span class="line"><span class="built_in">document</span>.write(str.toUpperCase());</span><br></pre></td></tr></table></figure>

<h3 id="查找字符串位置"><a href="#查找字符串位置" class="headerlink" title="查找字符串位置"></a>查找字符串位置</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'后盾人视频下载地址:www.houdunren.com,线下实战：www.houdunwang.com，在线学习平台：www.houdunren.com'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// while(字符串中有houdun)&#123;</span></span><br><span class="line"><span class="comment">//     获得houdun第一次出现的位置,并存储</span></span><br><span class="line"><span class="comment">//     将第一次出现的houdun替换成等长的其他字符</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="keyword">var</span> result = [];</span><br><span class="line"><span class="keyword">while</span>(str.match(<span class="string">'houdun'</span>))&#123;</span><br><span class="line">    <span class="comment">// 查找houdun第一次出现的位置</span></span><br><span class="line">    <span class="keyword">var</span> index = str.indexOf(<span class="string">'houdun'</span>);</span><br><span class="line">    <span class="comment">// 将houdun第一次出现的位置存储</span></span><br><span class="line">    result.push(index);</span><br><span class="line">    <span class="comment">// 将第一个houdun替换成其他字符</span></span><br><span class="line">    str = str.replace(<span class="string">'houdun'</span>,<span class="string">'*******'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="数字对象"><a href="#数字对象" class="headerlink" title="数字对象"></a>数字对象</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 取绝对值</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.abs(<span class="number">6</span>);</span><br><span class="line"><span class="comment">// 四舍五入(结果是整数)</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.round(<span class="number">2.49</span>);</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.round(<span class="number">2.5</span>);</span><br><span class="line"><span class="comment">// 向上取整</span></span><br><span class="line"><span class="comment">// 整数向上向下取整结果都是他本身</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.ceil(<span class="number">6</span>);</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.floor(<span class="number">6.03</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br></pre></td></tr></table></figure>

<h3 id="随机数"><a href="#随机数" class="headerlink" title="随机数"></a>随机数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 取0-1之间的随机数</span></span><br><span class="line"><span class="comment">// 取值范围是无限接近于0和1</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.random();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取0-5之间的随机数</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.random()*<span class="number">5</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取10-15之间的随机数</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.random()*(<span class="number">15</span><span class="number">-10</span>)+<span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取x-y之间的随机数</span></span><br><span class="line"><span class="built_in">Math</span>.random()*(y-x)+x;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.random()*(<span class="number">26</span><span class="number">-11</span>)+<span class="number">11</span>;</span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*(<span class="number">15</span><span class="number">-10</span>)+<span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取10-15之间的随机整数(可以取到10和15)</span></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(<span class="number">16</span><span class="number">-10</span>)+<span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取x-y之间的随机整数(可以取到x和y)</span></span><br><span class="line"><span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(y+<span class="number">1</span>-x)+x);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(<span class="number">49</span>+<span class="number">1</span><span class="number">-22</span>)+<span class="number">22</span>);</span><br><span class="line"><span class="built_in">document</span>.write(result);</span><br><span class="line"><span class="comment">// 作业:写一个随机点名/点菜的效果</span></span><br></pre></td></tr></table></figure>

<h3 id="随机点菜-1"><a href="#随机点菜-1" class="headerlink" title="随机点菜 1"></a>随机点菜 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 3/将随机下标对应的数组元素输出</span></span><br><span class="line"><span class="comment">// 1/将菜名写到数组中</span></span><br><span class="line"><span class="comment">// 2/随机数组下标</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cai = [<span class="string">'土豆丝'</span>,<span class="string">'油焖大虾'</span>,<span class="string">'麻婆豆腐'</span>,<span class="string">'宫保鸡丁'</span>,<span class="string">'佛跳墙'</span>,<span class="string">'重庆火锅'</span>,<span class="string">'北京烤鸭'</span>];</span><br><span class="line"><span class="keyword">var</span> x = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(cai.length<span class="number">-1</span>+<span class="number">1</span><span class="number">-0</span>)+<span class="number">0</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"今天中午吃："</span>+cai[x]);</span><br></pre></td></tr></table></figure>

<h3 id="随机点菜-2"><a href="#随机点菜-2" class="headerlink" title="随机点菜 2"></a>随机点菜 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> cai = [<span class="string">'土豆丝'</span>,<span class="string">'油焖大虾'</span>,<span class="string">'麻婆豆腐'</span>,<span class="string">'宫保鸡丁'</span>,<span class="string">'佛跳墙'</span>,<span class="string">'重庆火锅'</span>,<span class="string">'北京烤鸭'</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> y = <span class="built_in">Math</span>.random()*<span class="number">10</span>;</span><br><span class="line"><span class="keyword">if</span> (y&lt;<span class="number">8</span>) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"今天中午吃："</span>+cai[<span class="number">0</span>]);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = 				<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(cai.length<span class="number">-1</span>+<span class="number">1</span><span class="number">-0</span>)+<span class="number">0</span>);</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"今天中午吃："</span>+cai[x]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// window对象下直接的方法和属性,在调用的时候不用加window</span></span><br><span class="line"><span class="comment">// alert('后盾人');</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 全局变量和自定义函数,都属于window对象的属性和方法</span></span><br><span class="line"><span class="comment">// var hd = '后盾人';</span></span><br><span class="line"><span class="comment">// document.write(window.hd);</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> x*x;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.write(<span class="built_in">window</span>.foo(<span class="number">4</span>));</span><br></pre></td></tr></table></figure>

<h3 id="confirm"><a href="#confirm" class="headerlink" title="confirm"></a>confirm</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result = confirm(<span class="string">'你确定要删除吗？'</span>);</span><br><span class="line"><span class="comment">// document.write(result);</span></span><br><span class="line"><span class="keyword">if</span> (result) &#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"删除成功！"</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">"删除操作取消！"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'后盾人'</span>);</span><br><span class="line">&#125;</span><br><span class="line">			</span><br><span class="line">foo();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 每隔2000毫秒,执行一次foo函数</span></span><br><span class="line"><span class="comment">// 类似于闹铃,每隔24小时执行一次</span></span><br><span class="line">setInterval(foo,<span class="number">2000</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定时炸弹</span></span><br><span class="line"><span class="comment">// 3000毫秒后,执行一次foo函数</span></span><br><span class="line">setTimeout(foo,<span class="number">3000</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 定时器两种传参写法</span></span><br><span class="line">setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'hahahha'</span>);</span><br><span class="line">&#125;,<span class="number">2000</span>)</span><br></pre></td></tr></table></figure>

<h3 id="清理定时器"><a href="#清理定时器" class="headerlink" title="清理定时器"></a>清理定时器</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'后盾人'</span>);</span><br><span class="line">&#125;,<span class="number">2000</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"后盾人-----"</span>);</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 清理定时器</span></span><br><span class="line">    clearInterval(timer);</span><br><span class="line">&#125;,<span class="number">5000</span>);</span><br></pre></td></tr></table></figure>

<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 事件三大要素</span></span><br><span class="line"><span class="comment">// 1/事件源</span></span><br><span class="line"><span class="comment">// 2/事件触发条件</span></span><br><span class="line"><span class="comment">// 3/事件处理程序</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 按了一下开关,灯就亮了</span></span><br><span class="line"><span class="comment">// 怎么样了谁,然后怎么怎么样</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// window.onload表示页面中body的内容加载完毕后再执行对应代码</span></span><br><span class="line"><span class="comment">// 需要操作body中的内容的时候,就需要加window.onload</span></span><br><span class="line"><span class="comment">// window.onload = function()&#123;</span></span><br><span class="line"><span class="comment">//     document.getElementById('dog').onclick = function()&#123;</span></span><br><span class="line"><span class="comment">//         alert('汪汪汪~~~');</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line">&lt;img src=<span class="string">"jinmao.jpg"</span> id=<span class="string">"dog"</span> /&gt;</span><br><span class="line">		</span><br><span class="line"><span class="comment">// &lt;script type="text/javascript"&gt;</span></span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'dog'</span>).onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'汪汪汪~~~'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// &lt;/script&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="事件-1"><a href="#事件-1" class="headerlink" title="事件"></a>事件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">'汪汪汪~~~~'</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过html标签绑定事件</span></span><br><span class="line">&lt;img src=<span class="string">"jinmao.jpg"</span> id=<span class="string">"dog"</span> onclick=<span class="string">"foo()"</span> /&gt;</span><br></pre></td></tr></table></figure>

<h3 id="获得和设置行内样式"><a href="#获得和设置行内样式" class="headerlink" title="获得和设置行内样式"></a>获得和设置行内样式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// css</span></span><br><span class="line">*&#123;</span><br><span class="line">    padding:<span class="number">0</span>;</span><br><span class="line">    margin: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">#btn&#123;</span><br><span class="line">    margin: <span class="number">20</span>px;</span><br><span class="line">&#125;</span><br><span class="line">#hd&#123;</span><br><span class="line">    height: <span class="number">200</span>px;</span><br><span class="line">    background: mediumpurple;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line">    <span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 给按钮加单击事件</span></span><br><span class="line">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得元素的行内样式</span></span><br><span class="line">        <span class="comment">// var w = hd.style.width;</span></span><br><span class="line">        <span class="comment">// alert(w);</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 设置行内样式</span></span><br><span class="line">        <span class="comment">// hd.style.width = '400px';</span></span><br><span class="line">        </span><br><span class="line">        <span class="keyword">var</span> ml = hd.style.marginLeft;</span><br><span class="line">        alert(ml);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;div id=<span class="string">"hd"</span> style=<span class="string">"width: 300px;margin-left: 20px;"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="元素样式变化"><a href="#元素样式变化" class="headerlink" title="元素样式变化"></a>元素样式变化</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line">    <span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line">    <span class="comment">// 给按钮加单击事件</span></span><br><span class="line">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得元素当前的宽度</span></span><br><span class="line">        <span class="keyword">var</span> old_width = hd.style.width;</span><br><span class="line">        <span class="comment">// 计算新宽度</span></span><br><span class="line">        <span class="keyword">var</span> new_width = <span class="built_in">parseInt</span>(old_width)+<span class="number">10</span>;</span><br><span class="line">        <span class="comment">// 将新宽度赋值回去</span></span><br><span class="line">        hd.style.width = new_width+<span class="string">'px'</span>;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span> style=<span class="string">"width: 300px;margin-left: 20px;"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="运动的基本原理"><a href="#运动的基本原理" class="headerlink" title="运动的基本原理"></a>运动的基本原理</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line">    <span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 给按钮加单击事件</span></span><br><span class="line">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 设置定时器,自动改变宽度</span></span><br><span class="line">        setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="comment">// 获得当前宽度</span></span><br><span class="line">            <span class="keyword">var</span> old_width = hd.style.width;</span><br><span class="line">            <span class="comment">// 计算新宽度</span></span><br><span class="line">            <span class="keyword">var</span> new_width = <span class="built_in">parseInt</span>(old_width)+<span class="number">2</span>;</span><br><span class="line">            <span class="comment">// 将新宽度赋值回来</span></span><br><span class="line">            hd.style.width = new_width+<span class="string">'px'</span>;</span><br><span class="line">        &#125;,<span class="number">50</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:点击按钮,让元素向右跑</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span> style=<span class="string">"width: 300px;margin-left: 20px;"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="元素向右运动"><a href="#元素向右运动" class="headerlink" title="元素向右运动"></a>元素向右运动</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;img src=<span class="string">"xiaohuangya.png"</span> id=<span class="string">"pic"</span> width=<span class="string">"180"</span> style=<span class="string">"position: absolute;left: 20px;top: 50px;"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得当前left值</span></span><br><span class="line">        <span class="keyword">var</span> old_left = pic.style.left;</span><br><span class="line">        <span class="comment">// 计算新left值</span></span><br><span class="line">        <span class="keyword">var</span> new_left = <span class="built_in">parseInt</span>(old_left)+<span class="number">2</span>;</span><br><span class="line">        <span class="comment">// 将新值赋值给元素</span></span><br><span class="line">        pic.style.left = new_left+<span class="string">'px'</span></span><br><span class="line">    &#125;,<span class="number">50</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="运动的停止-1"><a href="#运动的停止-1" class="headerlink" title="运动的停止 1"></a>运动的停止 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"┏ (゜ω゜)=☞"</span> /&gt;</span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"pause"</span> value=<span class="string">"停一下!"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;img src=<span class="string">"xiaohuangya.png"</span> id=<span class="string">"pic"</span> width=<span class="string">"180"</span> style=<span class="string">"position: absolute;left: 20px;top: 50px;"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"><span class="keyword">var</span> pause = <span class="built_in">document</span>.getElementById(<span class="string">"pause"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得当前left值</span></span><br><span class="line">        <span class="keyword">var</span> old_left = pic.style.left;</span><br><span class="line">        <span class="comment">// 计算新left值</span></span><br><span class="line">        <span class="keyword">var</span> new_left = <span class="built_in">parseInt</span>(old_left)+<span class="number">2</span>;</span><br><span class="line">        <span class="comment">// 将新值赋值给元素</span></span><br><span class="line">        pic.style.left = new_left+<span class="string">'px'</span></span><br><span class="line">    &#125;,<span class="number">50</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 暂停按钮加单击事件</span></span><br><span class="line">pause.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 清理定时器</span></span><br><span class="line">    clearInterval(timer);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="运动的停止-2"><a href="#运动的停止-2" class="headerlink" title="运动的停止 2"></a>运动的停止 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"┏ (゜ω゜)=☞"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;img src=<span class="string">"xiaohuangya.png"</span> id=<span class="string">"pic"</span> width=<span class="string">"180"</span> style=<span class="string">"position: absolute;left: 20px;top: 50px;"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得当前left值</span></span><br><span class="line">        <span class="keyword">var</span> old_left = pic.style.left;</span><br><span class="line">        <span class="comment">// 计算新left值</span></span><br><span class="line">        <span class="keyword">var</span> new_left = <span class="built_in">parseInt</span>(old_left)+<span class="number">5</span>;</span><br><span class="line">        <span class="comment">// 将新值赋值给元素</span></span><br><span class="line">        pic.style.left = new_left+<span class="string">'px'</span>;</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">if</span> (new_left==<span class="number">500</span>) &#123;</span><br><span class="line">            <span class="comment">// 清理定时器</span></span><br><span class="line">            clearInterval(timer);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">    &#125;,<span class="number">20</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:</span></span><br><span class="line"><span class="comment">// 1/一个按钮,一张图片,点击按钮,让图片加速跑</span></span><br><span class="line"><span class="comment">// 2/一个按钮,一张图片,点击按钮,让图片折返跑</span></span><br></pre></td></tr></table></figure>

<h3 id="加速跑"><a href="#加速跑" class="headerlink" title="加速跑"></a>加速跑</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"┏ (゜ω゜)=☞"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;img src=<span class="string">"xiaohuangya.png"</span> id=<span class="string">"pic"</span> width=<span class="string">"180"</span> style=<span class="string">"position: absolute;left: 20px;top: 50px;"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"><span class="keyword">var</span> speed = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// speed++;</span></span><br><span class="line">        speed = speed*<span class="number">1.05</span>;</span><br><span class="line">        <span class="comment">// 获得当前left值</span></span><br><span class="line">        <span class="keyword">var</span> old_left = pic.style.left;</span><br><span class="line">        <span class="comment">// 计算新left值</span></span><br><span class="line">        <span class="keyword">var</span> new_left = <span class="built_in">parseInt</span>(old_left)+speed;</span><br><span class="line">        <span class="comment">// 将新值赋值给元素</span></span><br><span class="line">        pic.style.left = new_left+<span class="string">'px'</span>;</span><br><span class="line">    &#125;,<span class="number">20</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="元素自动显隐"><a href="#元素自动显隐" class="headerlink" title="元素自动显隐"></a>元素自动显隐</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;img src=<span class="string">"jinmao.jpg"</span> id=<span class="string">"pic"</span> /&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"><span class="keyword">var</span> sta = <span class="number">1</span>;<span class="comment">//1对应显示状态</span></span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (sta==<span class="number">1</span>) &#123;</span><br><span class="line">        <span class="comment">// 让图片隐藏</span></span><br><span class="line">        pic.style.display = <span class="string">'none'</span>;</span><br><span class="line">        sta=<span class="number">2</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(sta==<span class="number">2</span>)&#123;</span><br><span class="line">        <span class="comment">// 让图片显示</span></span><br><span class="line">        pic.style.display = <span class="string">'block'</span>;</span><br><span class="line">        sta=<span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="折返跑"><a href="#折返跑" class="headerlink" title="折返跑"></a>折返跑</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// &lt;input type="button" id="btn" value="┏ (゜ω゜)=☞" /&gt;</span></span><br><span class="line"><span class="comment">// &lt;br /&gt;&lt;br /&gt;</span></span><br><span class="line"><span class="comment">// &lt;img src="xiaohuangya.png" id="pic" width="180" style="position: absolute;top: 50px;left:0px;" /&gt;</span></span><br><span class="line"><span class="comment">// &lt;div class="qiang"&gt;&lt;/div&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.getElementById(<span class="string">"pic"</span>);</span><br><span class="line"><span class="keyword">var</span> speed = <span class="number">5</span>;</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> ole_left = pic.style.left;</span><br><span class="line">        <span class="keyword">var</span> new_left = <span class="built_in">parseInt</span>(ole_left)+speed;</span><br><span class="line">        pic.style.left = new_left+<span class="string">'px'</span>;</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// if (new_left==520) &#123;</span></span><br><span class="line">        <span class="comment">//     alert('撞墙啦');</span></span><br><span class="line">        <span class="comment">//     speed = -1*speed;</span></span><br><span class="line">        <span class="comment">// &#125;</span></span><br><span class="line">        <span class="comment">// if (new_left==0) &#123;</span></span><br><span class="line">        <span class="comment">//     speed = -1*speed;</span></span><br><span class="line">        <span class="comment">// &#125;</span></span><br><span class="line">        </span><br><span class="line">        <span class="keyword">if</span> (new_left==<span class="number">520</span> || new_left==<span class="number">0</span>) &#123;</span><br><span class="line">            speed = <span class="number">-1</span>*speed;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;,<span class="number">20</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业:一个200*200大小的div,逐渐变大到400*400,然后缩小到200*200,反复执行</span></span><br></pre></td></tr></table></figure>

<h3 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line"><span class="comment">// 单击事件</span></span><br><span class="line">hd.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'单击事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 双击事件</span></span><br><span class="line">hd.ondblclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'双击事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 鼠标按下事件</span></span><br><span class="line">hd.onmousedown = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'鼠标按下事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 鼠标抬起事件</span></span><br><span class="line">hd.onmouseup= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'鼠标抬起事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 鼠标移入事件</span></span><br><span class="line">hd.onmouseover= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'鼠标移入事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line">        </span><br><span class="line"><span class="comment">// 鼠标移出事件</span></span><br><span class="line">hd.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'鼠标移出事件触发了'</span>);</span><br><span class="line">&#125;</span><br><span class="line">        </span><br><span class="line"><span class="comment">// 鼠标移动事件</span></span><br><span class="line">hd.onmousemove = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'鼠标移动事件触发了'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="dom"><a href="#dom" class="headerlink" title="dom"></a>dom</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获得title标签的内容</span></span><br><span class="line">alert(<span class="built_in">document</span>.title);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置title标签的内容</span></span><br><span class="line"><span class="built_in">document</span>.title = <span class="string">'我是新设置的内容'</span>;</span><br></pre></td></tr></table></figure>

<h3 id="dom获得元素的几种方法"><a href="#dom获得元素的几种方法" class="headerlink" title="dom获得元素的几种方法"></a>dom获得元素的几种方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">""</span>&gt;</span><br><span class="line">    &lt;p&gt;后盾人 人人做后盾&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p id="two"&gt;后盾人 人人做后盾&lt;/</span>p&gt;</span><br><span class="line">    &lt;p <span class="class"><span class="keyword">class</span></span>=<span class="string">"hd"</span>&gt;后盾人 人人做后盾&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p id="two" name='houdun' class="hd"&gt;后盾人 人人做后盾&lt;/</span>p&gt;</span><br><span class="line">    &lt;p name=<span class="string">'houdun'</span>&gt;后盾人 人人做后盾&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p class="hd"&gt;后盾人 人人做后盾&lt;/</span>p&gt;</span><br><span class="line">    &lt;p name=<span class="string">'houdun'</span>&gt;后盾人 人人做后盾&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p class="hd"&gt;后盾人 人人做后盾&lt;/</span>p&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 通过id选择元素</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">hd.style.color = 'blue';</span></span><br><span class="line"><span class="regexp">hd.style.fontSize = '30px';</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 注意:通过标签名/</span>name属性/<span class="class"><span class="keyword">class</span>属性选元素的时候,返回结果是一个数组,数组存着所有符合条件的元素</span></span><br><span class="line"><span class="class"></span></span><br><span class="line"><span class="class">// 通过标签名选元素</span></span><br><span class="line"><span class="class"><span class="title">var</span> <span class="title">ps</span> </span>= <span class="built_in">document</span>.getElementsByTagName(<span class="string">'p'</span>);</span><br><span class="line">ps[<span class="number">0</span>].style.color = <span class="string">'blue'</span>;</span><br><span class="line">ps[<span class="number">1</span>].style.color = <span class="string">'blue'</span>;</span><br><span class="line">ps[<span class="number">2</span>].style.color = <span class="string">'blue'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过class属性来选择元素</span></span><br><span class="line"><span class="keyword">var</span> ps = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'hd'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过name属性选元素</span></span><br><span class="line"><span class="keyword">var</span> ps = <span class="built_in">document</span>.getElementsByName(<span class="string">'houdun'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;ps.length;i++) &#123;</span><br><span class="line">    ps[i].style.color = <span class="string">'blue'</span>;</span><br></pre></td></tr></table></figure>

<h3 id="-1"><a href="#-1" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我进行操作"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;h1 id=<span class="string">"title"</span>&gt;后盾人 &lt;span&gt;人人&lt;<span class="regexp">/span&gt;做后盾&lt;/</span>h1&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> title = <span class="built_in">document</span>.getElementById(<span class="string">"title"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 获得元素所有的内容(包含标签)</span></span><br><span class="line">    <span class="keyword">var</span> con = title.innerHTML;</span><br><span class="line">    alert(con);</span><br><span class="line">    <span class="comment">// 获得纯文本内容</span></span><br><span class="line">    <span class="comment">// document.all用来判断ie和非ie浏览器</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.all) &#123;<span class="comment">//ie</span></span><br><span class="line">        <span class="keyword">var</span> con = title.innerText;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;<span class="comment">//非ie浏览器</span></span><br><span class="line">        <span class="keyword">var</span> con = title.textContent;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 短路兼容性写法</span></span><br><span class="line">    <span class="keyword">var</span> con = title.innerText || title.textContent;</span><br><span class="line"></span><br><span class="line">    alert(con);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="设置元素内容"><a href="#设置元素内容" class="headerlink" title="设置元素内容"></a>设置元素内容</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我进行操作"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;h1 id=<span class="string">"title"</span>&gt;后盾人 &lt;span&gt;人人&lt;<span class="regexp">/span&gt;做后盾&lt;/</span>h1&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> title = <span class="built_in">document</span>.getElementById(<span class="string">"title"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 设置元素内容</span></span><br><span class="line">    title.innerHTML = <span class="string">'我是新设置的内容'</span>;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="倒计时跳转"><a href="#倒计时跳转" class="headerlink" title="倒计时跳转"></a>倒计时跳转</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> time = <span class="built_in">document</span>.getElementById(<span class="string">"time"</span>);</span><br><span class="line">setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 获得span当前内容</span></span><br><span class="line">    <span class="keyword">var</span> con = time.innerText || time.textContent;</span><br><span class="line">    <span class="keyword">var</span> new_con = con<span class="number">-1</span>;</span><br><span class="line">    <span class="comment">// 将新内容写回去  </span></span><br><span class="line">    time.innerHTML = new_con;</span><br><span class="line">    <span class="keyword">if</span> (new_con==<span class="number">1</span>) &#123;</span><br><span class="line">        <span class="comment">// 跳转</span></span><br><span class="line">        <span class="comment">// location.href = 'http://houdunren.com';</span></span><br><span class="line">        <span class="comment">// location.assign('http://houdunren.com');</span></span><br><span class="line">        location.replace(<span class="string">'http://houdunren.com'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<h3 id="乾坤大挪移"><a href="#乾坤大挪移" class="headerlink" title="乾坤大挪移"></a>乾坤大挪移</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"x"</span>&gt;</span><br><span class="line">    后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com &lt;img src=<span class="string">"jinmao.jpg"</span> width=<span class="string">"100"</span> /&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;br /</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"乾坤大挪移"</span> id=<span class="string">"btn"</span> /&gt;</span><br><span class="line"></span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;div id=<span class="string">"y"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var x = document.getElementById("x");</span></span><br><span class="line"><span class="regexp">var y = document.getElementById("y");</span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp">var sta = 1;/</span><span class="regexp">/1对应内容在上面的状态</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    if (sta==1) &#123;</span></span><br><span class="line"><span class="regexp">        y.innerHTML = x.innerHTML;</span></span><br><span class="line"><span class="regexp">        x.innerHTML = '';</span></span><br><span class="line"><span class="regexp">        sta = 2;</span></span><br><span class="line"><span class="regexp">    &#125;else if(sta==2)&#123;</span></span><br><span class="line"><span class="regexp">        x.innerHTML = y.innerHTML;</span></span><br><span class="line"><span class="regexp">        y.innerHTML = '';</span></span><br><span class="line"><span class="regexp">        sta = 1;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="乾坤大挪移-2"><a href="#乾坤大挪移-2" class="headerlink" title="乾坤大挪移 2"></a>乾坤大挪移 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"x"</span>&gt;</span><br><span class="line">    后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com &lt;img src=<span class="string">"jinmao.jpg"</span> width=<span class="string">"100"</span> /&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;br /</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"乾坤大挪移"</span> id=<span class="string">"btn"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;div id=<span class="string">"y"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var x = document.getElementById("x");</span></span><br><span class="line"><span class="regexp">var y = document.getElementById("y");</span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得x的内容</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ var con = x.innerHTML;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 将内容设置给y</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ y.innerHTML = con;</span></span><br><span class="line"><span class="regexp">    y.innerHTML = x.innerHTML;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 将x清空</span></span><br><span class="line"><span class="regexp">    x.innerHTML = '';</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="操作元素属性"><a href="#操作元素属性" class="headerlink" title="操作元素属性"></a>操作元素属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"我是一只按钮"</span> id=<span class="string">"btn"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;h1 id=<span class="string">"title"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"bt"</span> hd=<span class="string">"houdun"</span>&gt;后盾人 人人做后盾&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp">var title = document.getElementById("title");</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 元素.属性这种形式只能操作特定属性 ,比如id class href src等等</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得属性</span></span><br><span class="line"><span class="regexp">    alert(title.id);</span></span><br><span class="line"><span class="regexp">    alert(title.className);</span></span><br><span class="line"><span class="regexp">    alert(title.hd);</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 设置元素属性</span></span><br><span class="line"><span class="regexp">    title.className = 'wwwwwwwwwwwww';</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="操作元素属性任意性"><a href="#操作元素属性任意性" class="headerlink" title="操作元素属性任意性"></a>操作元素属性任意性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"我是一只按钮"</span> id=<span class="string">"btn"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;h1 id=<span class="string">"title"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"bt"</span> hd=<span class="string">"houdun"</span>&gt;后盾人 人人做后盾&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp">var title = document.getElementById("title");</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 元素.属性这种形式只能操作特定属性 ,比如id class href src等等</span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得元素任意属性</span></span><br><span class="line"><span class="regexp">    var attr = title.getAttribute('hd');</span></span><br><span class="line"><span class="regexp">    alert(attr);</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 设置元素任意属性</span></span><br><span class="line"><span class="regexp">    title.setAttribute('class','wwwwwwwwwwww');</span></span><br><span class="line"><span class="regexp">    title.setAttribute('abc','wwwwwwwwwwww');</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">		</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 作业:</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 1/</span>小松鼠效果(两种切换效果)</span><br><span class="line"><span class="comment">// 2/写一个随机点菜的效果</span></span><br></pre></td></tr></table></figure>

<h3 id="实际作用在元素身上的样式"><a href="#实际作用在元素身上的样式" class="headerlink" title="实际作用在元素身上的样式"></a>实际作用在元素身上的样式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"点我啊"</span> /&gt;</span><br><span class="line">&lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">		</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ alert(hd.style.width);</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ if (document.all) &#123;/</span><span class="regexp">/IE</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/     var w = hd.currentStyle.width;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ &#125;else&#123;/</span><span class="regexp">/非IE</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/     var w = getComputedStyle(hd,null).width;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ &#125;</span></span><br><span class="line"><span class="regexp">    var w = getComputedStyle(hd,null).width || hd.currentStyle.width;</span></span><br><span class="line"><span class="regexp">    alert(w);</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="通过关系找元素"><a href="#通过关系找元素" class="headerlink" title="通过关系找元素"></a>通过关系找元素</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾0<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"two"</span>&gt;</span>后盾人 人人做后盾2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾3<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾4<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾5<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾6<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>后盾人 人人做后盾7<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">var two = document.getElementById("two");</span></span><br><span class="line"><span class="regexp">	</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	获得hd中所有的子节点</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	var ps = hd.childNodes;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	document.write(ps.length);</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	ps[1].style.color = 'red';</span></span><br><span class="line"><span class="regexp">	</span></span><br><span class="line"><span class="regexp">	</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	找元素的父级节点</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	two.parentNode.style.color = 'blue';</span></span><br><span class="line"><span class="regexp">	</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	第一个子节点</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	hd.firstChild.style.color = 'blue';</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	hd.lastChild.style.color = 'blue';</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	找兄弟节点</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/	two.previousSibling.style.color = 'blue';</span></span><br><span class="line"><span class="regexp">	two.nextSibling.style.color = 'blue';</span></span><br></pre></td></tr></table></figure>

<h3 id="节点方法"><a href="#节点方法" class="headerlink" title="节点方法"></a>节点方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"btn"</span> value=<span class="string">"我是按钮"</span> /&gt;</span><br><span class="line">    &lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">&lt;h1 id=<span class="string">"title"</span>&gt;我是h1标签！！！&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">&lt;div id="hd"&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;后盾人 人人做后盾0&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;后盾人 人人做后盾<span class="number">1</span>&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;后盾人 人人做后盾2&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;后盾人 人人做后盾<span class="number">3</span>&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;后盾人 人人做后盾4&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;后盾人 人人做后盾<span class="number">5</span>&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;后盾人 人人做后盾6&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;后盾人 人人做后盾<span class="number">7</span>&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">"btn"</span>);</span><br><span class="line"><span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line"><span class="keyword">var</span> ps = hd.getElementsByTagName(<span class="string">'p'</span>);</span><br><span class="line"><span class="keyword">var</span> title = <span class="built_in">document</span>.getElementById(<span class="string">"title"</span>);</span><br><span class="line"></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 创建空标签</span></span><br><span class="line">    <span class="keyword">var</span> newp = <span class="built_in">document</span>.createElement(<span class="string">'p'</span>);</span><br><span class="line">    <span class="comment">// 追加内容</span></span><br><span class="line">    newp.innerHTML = <span class="string">'我是新来的，请多多关照!'</span>;</span><br><span class="line">    <span class="comment">// 添加属性</span></span><br><span class="line">    newp.setAttribute(<span class="string">'class'</span>,<span class="string">'houdun'</span>);</span><br><span class="line">    <span class="comment">// 将新创建的标签追加到hd中</span></span><br><span class="line">    hd.appendChild(newp);</span><br><span class="line">    hd.insertBefore(title,ps[<span class="number">2</span>]);</span><br><span class="line">    <span class="comment">// 删除节点</span></span><br><span class="line">    hd.removeChild(ps[<span class="number">2</span>]);</span><br><span class="line">    <span class="comment">// 替换节点</span></span><br><span class="line">    hd.replaceChild(title,ps[<span class="number">2</span>]);</span><br><span class="line">    <span class="comment">// 复制节点</span></span><br><span class="line">    <span class="comment">// true参数表示完全复制</span></span><br><span class="line">    <span class="keyword">var</span> newh1 = title.cloneNode(<span class="literal">true</span>);</span><br><span class="line">    <span class="comment">// 将复制的节点追加到div中</span></span><br><span class="line">    hd.appendChild(newh1);</span><br><span class="line">&#125;</span><br><span class="line">	</span><br><span class="line"><span class="comment">//	作业:点击按钮,新创建一个上传框</span></span><br></pre></td></tr></table></figure>

<h3 id="获取元素位置"><a href="#获取元素位置" class="headerlink" title="获取元素位置"></a>获取元素位置</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"x"</span>&gt;</span><br><span class="line">    &lt;div id=<span class="string">"y"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="comment">// 如果是没有定位的元素,offsetLet和offsetTop获得的是元素距离body左侧和顶部的距离</span></span><br><span class="line"><span class="keyword">var</span> y = <span class="built_in">document</span>.getElementById(<span class="string">"y"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(y.offsetLeft);</span><br><span class="line"><span class="built_in">console</span>.log(y.offsetTop);</span><br></pre></td></tr></table></figure>

<h3 id="获取元素位置-1"><a href="#获取元素位置-1" class="headerlink" title="获取元素位置"></a>获取元素位置</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"x"</span>&gt;</span><br><span class="line">    &lt;div id=<span class="string">"y"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="comment">// 有定位属性的元素,offsetLeft和offsetTop就是获得它的left和top值</span></span><br><span class="line"><span class="keyword">var</span> y = <span class="built_in">document</span>.getElementById(<span class="string">"y"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(y.offsetLeft);</span><br><span class="line"><span class="built_in">console</span>.log(y.offsetTop);</span><br></pre></td></tr></table></figure>

<h3 id="获得元素的尺寸"><a href="#获得元素的尺寸" class="headerlink" title="获得元素的尺寸"></a>获得元素的尺寸</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获得可视区域宽高</span></span><br><span class="line"><span class="keyword">var</span> w = <span class="built_in">document</span>.documentElement.clientWidth;</span><br><span class="line"><span class="keyword">var</span> h = <span class="built_in">document</span>.documentElement.clientHeight;</span><br><span class="line"><span class="built_in">console</span>.log(w,h);</span><br></pre></td></tr></table></figure>

<h3 id="获得元素的尺寸-1"><a href="#获得元素的尺寸-1" class="headerlink" title="获得元素的尺寸"></a>获得元素的尺寸</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;</span><br><span class="line">    后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/		var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">/</span><span class="comment">///		获得元素的尺寸</span></span><br><span class="line"><span class="comment">//		var w = hd.offsetWidth;</span></span><br><span class="line"><span class="comment">//		var h = hd.offsetHeight;</span></span><br><span class="line"><span class="comment">//		console.log(w,h);</span></span><br><span class="line"><span class="comment">//		这种形式不能设置宽高</span></span><br><span class="line"><span class="comment">//		hd.offsetWidth = 2000;</span></span><br></pre></td></tr></table></figure>

<h3 id="-2"><a href="#-2" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// html</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 获得所有内容的高度</span></span><br><span class="line"><span class="regexp">console.log(hd.scrollHeight);</span></span><br></pre></td></tr></table></figure>

<h3 id="滚动条元素滚动条的位置"><a href="#滚动条元素滚动条的位置" class="headerlink" title="滚动条元素滚动条的位置"></a>滚动条元素滚动条的位置</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//&lt;input type="button" id="btn" value="设置滚动条位置" /&gt;</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">var btn = document.getElementById("btn");</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">btn.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 设置滚动条的位置</span></span><br><span class="line"><span class="regexp">    hd.scrollTop = 1000;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="-3"><a href="#-3" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"start"</span> value=<span class="string">"开始阅读"</span> /&gt;</span><br><span class="line">&lt;input type=<span class="string">"button"</span> id=<span class="string">"pause"</span> value=<span class="string">"暂停阅读"</span> /&gt;</span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">var start = document.getElementById("start");</span></span><br><span class="line"><span class="regexp">var pause = document.getElementById("pause");</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 开始阅读</span></span><br><span class="line"><span class="regexp">start.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    timer = setInterval(function()&#123;</span></span><br><span class="line"><span class="regexp">        /</span><span class="regexp">/ 获得当前滚动条的位置</span></span><br><span class="line"><span class="regexp">        var old_top = hd.scrollTop;</span></span><br><span class="line"><span class="regexp">        /</span><span class="regexp">/ 计算新位置</span></span><br><span class="line"><span class="regexp">        var new_top = old_top+2;</span></span><br><span class="line"><span class="regexp">        /</span><span class="regexp">/ 将新值赋值回去</span></span><br><span class="line"><span class="regexp">        hd.scrollTop = new_top;</span></span><br><span class="line"><span class="regexp">    &#125;,50)</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 暂停阅读</span></span><br><span class="line"><span class="regexp">pause.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 清理定时器</span></span><br><span class="line"><span class="regexp">    clearInterval(timer);</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="-4"><a href="#-4" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ js</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">hd.onmousemove = function(e)&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ alert('后盾人 人人做后盾');</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得兼容的事件对象</span></span><br><span class="line"><span class="regexp">    var ev = window.event || e;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得鼠标距离body左侧和顶部的距离</span></span><br><span class="line"><span class="regexp">    console.log(ev.clientX,ev.layerY);</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得鼠标距离事件源的位置</span></span><br><span class="line"><span class="regexp">    var l = ev.offsetX || ev.layerX;</span></span><br><span class="line"><span class="regexp">    var t = ev.offsetY || ev.layerY;</span></span><br><span class="line"><span class="regexp">    console.log(l,t);</span></span><br><span class="line"><span class="regexp">    </span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="tab切换效果"><a href="#tab切换效果" class="headerlink" title="tab切换效果"></a>tab切换效果</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"tab"</span>&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">        &lt;li style=<span class="string">"background: dodgerblue;"</span>&gt;新闻&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">        &lt;li style="background: orchid;"&gt;体育&lt;/</span>li&gt;</span><br><span class="line">        &lt;li style=<span class="string">"background: forestgreen;"</span>&gt;娱乐&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/u</span>l&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"con"</span> style=<span class="string">"background: dodgerblue;display: block;"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;div class="con" style="background: orchid;"&gt;&lt;/</span>div&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"con"</span> style=<span class="string">"background: forestgreen;"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> tab = <span class="built_in">document</span>.getElementById(<span class="string">"tab"</span>);</span><br><span class="line"><span class="keyword">var</span> lis = tab.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line"><span class="keyword">var</span> cs = tab.getElementsByClassName(<span class="string">'con'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 循环给每个li加鼠标移入事件和序号</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;lis.length;i++) &#123;</span><br><span class="line">    lis[i].xuhao = i;</span><br><span class="line">    lis[i].onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 获得当前移入的li的序号</span></span><br><span class="line">        <span class="keyword">var</span> c = <span class="keyword">this</span>.xuhao;</span><br><span class="line">        <span class="comment">// 让所有con隐藏</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">3</span>;i++) &#123;</span><br><span class="line">            cs[i].style.display = <span class="string">'none'</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 让c号con显示</span></span><br><span class="line">        cs[c].style.display = <span class="string">'block'</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="键盘事件和事件对象-1"><a href="#键盘事件和事件对象-1" class="headerlink" title="键盘事件和事件对象 1"></a>键盘事件和事件对象 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 键盘事件往往绑定给window对象</span></span><br><span class="line"><span class="built_in">window</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'键盘被按下'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onkeyup = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'键盘被抬起'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 任何数字字母键被按下并抬起会触发onkeypress事件</span></span><br><span class="line"><span class="built_in">window</span>.onkeypress = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'按下并抬起了数字或字母键'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="键盘事件和事件对象-2"><a href="#键盘事件和事件对象-2" class="headerlink" title="键盘事件和事件对象 2"></a>键盘事件和事件对象 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 键盘事件往往绑定给window对象</span></span><br><span class="line"><span class="built_in">window</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ev = <span class="built_in">window</span>.event || e;</span><br><span class="line">    <span class="built_in">console</span>.log(ev.keyCode);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">String</span>.fromCharCode(ev.keyCode));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="键盘事件和事件对象-3"><a href="#键盘事件和事件对象-3" class="headerlink" title="键盘事件和事件对象 3"></a>键盘事件和事件对象 3</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ev = <span class="built_in">window</span>.event || e;</span><br><span class="line">    <span class="comment">// 判断同时按下ctrl和回车键</span></span><br><span class="line">    <span class="keyword">if</span> (ev.ctrlKey &amp;&amp; ev.keyCode==<span class="number">13</span>) &#123;</span><br><span class="line">        alert(<span class="string">'提交内容'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="键盘事件和事件对象-4"><a href="#键盘事件和事件对象-4" class="headerlink" title="键盘事件和事件对象 4"></a>键盘事件和事件对象 4</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 键盘事件往往绑定给window对象</span></span><br><span class="line"><span class="built_in">window</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ev = <span class="built_in">window</span>.event || e;</span><br><span class="line">    <span class="built_in">console</span>.log(ev.ctrlKey);</span><br><span class="line">    <span class="built_in">console</span>.log(ev.shiftKey);</span><br><span class="line">    <span class="built_in">console</span>.log(ev.altKey);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="打字游戏原理"><a href="#打字游戏原理" class="headerlink" title="打字游戏原理"></a>打字游戏原理</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul id=<span class="string">"hd"</span>&gt;</span><br><span class="line">    &lt;li&gt;A&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;B&lt;/</span>li&gt;</span><br><span class="line">    &lt;li&gt;C&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;D&lt;/</span>li&gt;</span><br><span class="line">    &lt;li&gt;E&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line"><span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'QWERTYUIOPASDFGHJKLZXCVBNM'</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onkeydown = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ev = <span class="built_in">window</span>.event || e;</span><br><span class="line">        <span class="comment">// 获得按下的键</span></span><br><span class="line">    <span class="keyword">var</span> key = <span class="built_in">String</span>.fromCharCode(ev.keyCode);</span><br><span class="line">        <span class="comment">// 获得所有li标签</span></span><br><span class="line">    <span class="keyword">var</span> ls = hd.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line">    <span class="comment">// 循环所有li</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;ls.length;i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (ls[i].innerHTML==key) &#123;</span><br><span class="line">            <span class="comment">// 删掉i号li</span></span><br><span class="line">            hd.removeChild(ls[i]);</span><br><span class="line">            <span class="comment">// 随机数</span></span><br><span class="line">            <span class="keyword">var</span> rand = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(str.length<span class="number">-1</span>+<span class="number">1</span><span class="number">-0</span>)+<span class="number">0</span>);</span><br><span class="line">            <span class="comment">// 创建一个新的li标签</span></span><br><span class="line">            <span class="keyword">var</span> newli = <span class="built_in">document</span>.createElement(<span class="string">'li'</span>);</span><br><span class="line">            newli.innerHTML = str[rand];</span><br><span class="line">            <span class="comment">// 将新li追加到ul中</span></span><br><span class="line">            hd.appendChild(newli);</span><br><span class="line">            <span class="keyword">break</span>;<span class="comment">//退出循环</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="表单事件-1"><a href="#表单事件-1" class="headerlink" title="表单事件 1"></a>表单事件 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;form id=<span class="string">"f"</span> action=<span class="string">"a.php"</span> method=<span class="string">"post"</span>&gt;</span><br><span class="line">    名字： &lt;input type=<span class="string">"text"</span> id=<span class="string">"uname"</span> /&gt;</span><br><span class="line">    &lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">    密码： &lt;input type=<span class="string">"password"</span> /&gt;</span><br><span class="line">    &lt;br /&gt;<span class="xml"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">    &lt;input type=<span class="string">"submit"</span> value=<span class="string">"点我提交"</span>/&gt;</span><br><span class="line">&lt;<span class="regexp">/form&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ onsubmit会在表单提交之前执行</span></span><br><span class="line"><span class="regexp">f.onsubmit = function(e)&#123;</span></span><br><span class="line"><span class="regexp">    var ev = window.event || e;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ alert(name.value)</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ alert('表单要提交！');</span></span><br><span class="line"><span class="regexp">    if (uname.value.length&lt;6) &#123;</span></span><br><span class="line"><span class="regexp">        alert('你的内容长度小于6，不能提交！');</span></span><br><span class="line"><span class="regexp">        /</span><span class="regexp">/ 阻止表单的默认提交动作</span></span><br><span class="line"><span class="regexp">        if (document.all) &#123;</span></span><br><span class="line"><span class="regexp">            ev.returnValue = false; </span></span><br><span class="line"><span class="regexp">        &#125;else&#123;</span></span><br><span class="line"><span class="regexp">            ev.preventDefault();</span></span><br><span class="line"><span class="regexp">        &#125;</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="表单事件-2"><a href="#表单事件-2" class="headerlink" title="表单事件 2"></a>表单事件 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> hd = <span class="built_in">document</span>.getElementById(<span class="string">"hd"</span>);</span><br><span class="line"><span class="keyword">var</span> t = <span class="built_in">document</span>.getElementById(<span class="string">"t"</span>);</span><br><span class="line"><span class="comment">// 获得焦点事件</span></span><br><span class="line">hd.onfocus = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'获得焦点'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 失去焦点事件</span></span><br><span class="line">hd.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'失去焦点'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 内容发生变化,并且失去焦点的时候,会触发</span></span><br><span class="line">t.onchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'onchange事件触发'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="事件流-1"><a href="#事件流-1" class="headerlink" title="事件流"></a>事件流</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"beijing"</span>&gt;</span><br><span class="line">    北京</span><br><span class="line">    &lt;div id=<span class="string">"chaoyang"</span>&gt;</span><br><span class="line">        朝阳区</span><br><span class="line">        &lt;div id=<span class="string">"shunbailu"</span>&gt;</span><br><span class="line">            顺白路</span><br><span class="line">        &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 冒泡型事件流: 从离鼠标最近的元素到最远的元素依次触发</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">document.getElementById("beijing").onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    alert('北京');</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">document.getElementById("chaoyang").onclick = function(e)&#123;</span></span><br><span class="line"><span class="regexp">    alert('朝阳');</span></span><br><span class="line"><span class="regexp">    var ev = window.event || e;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 阻止事件流</span></span><br><span class="line"><span class="regexp">    if (document.all) &#123;</span></span><br><span class="line"><span class="regexp">        ev.cancelBubble=true; </span></span><br><span class="line"><span class="regexp">    &#125;else&#123;</span></span><br><span class="line"><span class="regexp">        ev.stopPropagation();</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">document.getElementById("shunbailu").onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    alert('顺白路');</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="阻止a标签跳转"><a href="#阻止a标签跳转" class="headerlink" title="阻止a标签跳转"></a>阻止a标签跳转</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">"http://houdunren.com"</span> id=<span class="string">"link"</span>&gt;后盾人&lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">document.getElementById("link").onclick = function(e)&#123;</span></span><br><span class="line"><span class="regexp">    alert('后盾人 人人做后盾');</span></span><br><span class="line"><span class="regexp">    var ev = window.event || e;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 阻止浏览器默认行为</span></span><br><span class="line"><span class="regexp">    if (document.all) &#123;</span></span><br><span class="line"><span class="regexp">        ev.returnValue = false; </span></span><br><span class="line"><span class="regexp">    &#125;else&#123;</span></span><br><span class="line"><span class="regexp">        ev.preventDefault(); </span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="this"><a href="#this" class="headerlink" title="this"></a>this</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var hd = document.getElementById("hd");</span></span><br><span class="line"><span class="regexp">this指向的是触发事件的时候的事件源</span></span><br><span class="line"><span class="regexp">hd.onclick = function()&#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ hd.style.background = 'orangered';</span></span><br><span class="line"><span class="regexp">    this.style.background = 'orangered';</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="圆角"><a href="#圆角" class="headerlink" title="圆角"></a>圆角</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//css</span></span><br><span class="line">#hd&#123;</span><br><span class="line">    width: <span class="number">500</span>px;</span><br><span class="line">    height: <span class="number">500</span>px;</span><br><span class="line">    background: mediumpurple;</span><br><span class="line">    margin: <span class="number">30</span>px auto;</span><br><span class="line">    border-radius: <span class="number">50</span>%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//js</span></span><br><span class="line">&lt;div id=<span class="string">"hd"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="创建日期"><a href="#创建日期" class="headerlink" title="创建日期"></a>创建日期</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建当前时间</span></span><br><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// js中的月份是0-11</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建指定时间</span></span><br><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2025</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(time.getFullYear());</span><br><span class="line"><span class="built_in">console</span>.log(time.getMonth());</span><br><span class="line"><span class="built_in">console</span>.log(time.getDate());</span><br><span class="line"><span class="built_in">console</span>.log(time.getDay());</span><br><span class="line"></span><br><span class="line"><span class="comment">// 修改相关信息</span></span><br><span class="line">time.setMonth(<span class="number">2</span>);</span><br><span class="line">time.setFullYear(<span class="number">2022</span>);</span><br><span class="line"><span class="built_in">document</span>.write(time);</span><br></pre></td></tr></table></figure>

<h3 id="当前时间"><a href="#当前时间" class="headerlink" title="当前时间"></a>当前时间</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;h1 id=<span class="string">"t"</span>&gt;当前时间是：&lt;span&gt;&lt;<span class="regexp">/span&gt;年&lt;span&gt;&lt;/</span>span&gt;月&lt;span&gt;&lt;<span class="regexp">/span&gt;日&lt;span&gt;&lt;/</span>span&gt;时&lt;span&gt;&lt;<span class="regexp">/span&gt;分&lt;span&gt;&lt;/</span>span&gt;秒&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">var ss = document.getElementById("t").getElementsByTagName('span');</span></span><br><span class="line"><span class="regexp">function changetime()&#123;</span></span><br><span class="line"><span class="regexp">    var time = new Date();</span></span><br><span class="line"><span class="regexp">    ss[0].innerHTML = time.getFullYear();</span></span><br><span class="line"><span class="regexp">    ss[1].innerHTML = time.getMonth();</span></span><br><span class="line"><span class="regexp">    ss[2].innerHTML = time.getDate();</span></span><br><span class="line"><span class="regexp">    ss[3].innerHTML = time.getHours();</span></span><br><span class="line"><span class="regexp">    ss[4].innerHTML = time.getMinutes();</span></span><br><span class="line"><span class="regexp">    ss[5].innerHTML = time.getSeconds();</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">changetime();</span></span><br><span class="line"><span class="regexp">setInterval(function()&#123;</span></span><br><span class="line"><span class="regexp">    changetime();</span></span><br><span class="line"><span class="regexp">&#125;,1000)</span></span><br></pre></td></tr></table></figure>

<h3 id="倒计时效果-1"><a href="#倒计时效果-1" class="headerlink" title="倒计时效果 1"></a>倒计时效果 1</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time2022 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2022</span>,<span class="number">0</span>,<span class="number">1</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line"><span class="comment">// 获得日期和时间参考点1970之间相差的毫秒数</span></span><br><span class="line"><span class="built_in">document</span>.write(time2022.getTime());</span><br></pre></td></tr></table></figure>

<h3 id="倒计时效果-2"><a href="#倒计时效果-2" class="headerlink" title="倒计时效果 2"></a>倒计时效果 2</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 id=<span class="string">"t"</span>&gt;距离<span class="number">2022</span>年元旦还有 &lt;span&gt;&lt;<span class="regexp">/span&gt;天&lt;span&gt;&lt;/</span>span&gt;小时&lt;span&gt;&lt;<span class="regexp">/span&gt;分钟&lt;span&gt;&lt;/</span>span&gt;秒&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/js</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 倒计时函数</span></span><br><span class="line"><span class="regexp">function djs()&#123;</span></span><br><span class="line"><span class="regexp">    var timenow = new Date();</span></span><br><span class="line"><span class="regexp">    var time2022 = new Date(2022,0,1,0,0,0);</span></span><br><span class="line"><span class="regexp">    </span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 获得到2022年之间的时间差</span></span><br><span class="line"><span class="regexp">    var diff = time2022.getTime() - timenow.getTime();</span></span><br><span class="line"><span class="regexp">    document.write(diff);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/ 计算天数</span></span><br><span class="line"><span class="regexp">    var days = parseInt(diff/</span>(<span class="number">24</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>));</span><br><span class="line">    <span class="built_in">document</span>.write(days);</span><br><span class="line">    <span class="comment">// 获得计算完天数后还剩余的毫秒数</span></span><br><span class="line">    diff = diff%(<span class="number">24</span>*<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>);</span><br><span class="line">    <span class="comment">// 计算小时</span></span><br><span class="line">    <span class="keyword">var</span> hours = <span class="built_in">parseInt</span>(diff/(<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>));</span><br><span class="line">    <span class="comment">// 获得计算完小时后还剩余的毫秒数</span></span><br><span class="line">    diff = diff%(<span class="number">60</span>*<span class="number">60</span>*<span class="number">1000</span>);</span><br><span class="line">    <span class="comment">// 计算分钟</span></span><br><span class="line">    <span class="keyword">var</span> minutes = <span class="built_in">parseInt</span>(diff/(<span class="number">60</span>*<span class="number">1000</span>));</span><br><span class="line">    <span class="comment">// 计算分钟后还剩余的毫秒数</span></span><br><span class="line">    diff = diff%(<span class="number">60</span>*<span class="number">1000</span>);</span><br><span class="line">    <span class="keyword">var</span> secondes = <span class="built_in">parseInt</span>(diff/<span class="number">1000</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> ss = <span class="built_in">document</span>.getElementById(<span class="string">"t"</span>).getElementsByTagName(<span class="string">'span'</span>);</span><br><span class="line">    ss[<span class="number">0</span>].innerHTML	 = days;</span><br><span class="line">    ss[<span class="number">1</span>].innerHTML	 = hours;</span><br><span class="line">    ss[<span class="number">2</span>].innerHTML	 = minutes;</span><br><span class="line">    ss[<span class="number">3</span>].innerHTML	 = secondes;</span><br><span class="line">&#125;</span><br><span class="line">djs();</span><br><span class="line"></span><br><span class="line">setInterval(djs,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<h3 id="递归函数"><a href="#递归函数" class="headerlink" title="递归函数"></a>递归函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">	<span class="comment">//递归函数:在函数内部自己调用自己的函数</span></span><br><span class="line"><span class="comment">//	阶乘: </span></span><br><span class="line"><span class="comment">//	6! 6*5*4*3*2*1</span></span><br><span class="line"><span class="comment">//	7! 7*6*5*4*3*2*1</span></span><br><span class="line"><span class="comment">//	x x*(x-1的阶乘)</span></span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line"><span class="comment">//	foo是计算阶乘的函数</span></span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">if</span> (x==<span class="number">1</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> x*foo(x<span class="number">-1</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="built_in">console</span>.log(foo(<span class="number">5</span>));</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line">		</span><br><span class="line"><span class="comment">//	李雷  张三  李四  王五  赵六  韩梅梅</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//	foo(5)&#123;</span></span><br><span class="line"><span class="comment">//		return 5*foo(4)&#123;</span></span><br><span class="line"><span class="comment">//			return 4*foo(3)&#123;</span></span><br><span class="line"><span class="comment">//				return 3*foo(2)&#123;</span></span><br><span class="line"><span class="comment">//					return 2*foo(1)&#123;</span></span><br><span class="line"><span class="comment">//						return 1;</span></span><br><span class="line"><span class="comment">//					&#125;;</span></span><br><span class="line"><span class="comment">//				&#125;</span></span><br><span class="line"><span class="comment">//			&#125;</span></span><br><span class="line"><span class="comment">//		&#125;</span></span><br><span class="line"><span class="comment">//	&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="-5"><a href="#-5" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="-6"><a href="#-6" class="headerlink" title=""></a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h1 id="107常用JavaScript语句"><a href="#107常用JavaScript语句" class="headerlink" title="107常用JavaScript语句"></a>107常用JavaScript语句</h1><ol>
<li><p>document.write( “ “); 输出语句</p>
</li>
<li><p>JS 中的注释为 // </p>
</li>
<li><p>传统的 HTML 文档顺序是 :document- &gt;html- &gt;(head,body) </p>
</li>
<li><p>一个浏览器窗口中的 DOM 顺序是 :window- &gt;(navigator,screen,history,location,document) </p>
</li>
<li><p>得到表单中元素的名称和值 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById( <span class="string">"表单中元素的 ID 號 "</span>).name</span><br><span class="line">(或value)</span><br></pre></td></tr></table></figure></li>
<li><p>一 个 小 写 转 大 写 的 JS: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById( <span class="string">"output "</span>).value = </span><br><span class="line"><span class="built_in">document</span>.getElementById( <span class="string">"input "</span>).value.toUpperCase();</span><br></pre></td></tr></table></figure>
</li>
<li><p>JS 中的值类型 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">String</span>,<span class="built_in">Number</span>,<span class="built_in">Boolean</span>,Null,<span class="built_in">Object</span>,<span class="built_in">Function</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的字符型转换成数值型 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(),<span class="built_in">parseFloat</span>()</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的数字转换成字符型 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">( <span class="string">" "</span> 变量 )</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的取字符串长度是 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(length)</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的字符与字符相连接使用號</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">. (点号)</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的比较操作符有 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ==等于 ,!= 不等于 , &gt;, &gt;=, &lt;. &lt;=</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中声明变量使用 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 来进行声明</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的判定语句结构 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(condition)&#123;&#125;<span class="keyword">else</span>&#123;&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的循环结构 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>([initial expression];[condition];[upadte expression]) &#123;inside loop&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>循环中止的命令是 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">break</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的函数定义 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionName</span>(<span class="params">[parameter],...</span>)</span>&#123;statement[s]&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>当文件中出现多个 form 表单时 .可以用 document.forms[0],document.forms[1] 来代替 . </p>
</li>
<li><p>窗口 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 打开窗口 window.open(), 关闭一个窗口 :window.close(), 窗口本身 :self</span></span><br></pre></td></tr></table></figure></li>
<li><p>状態栏的设置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.status= <span class="string">" 字符 "</span>;</span><br></pre></td></tr></table></figure></li>
<li><p>弹出提示信息 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.alert( <span class="string">" 字符 "</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>弹出確认框 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.confirm();</span><br></pre></td></tr></table></figure></li>
<li><p>弹出输入提示框 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.prompt();</span><br></pre></td></tr></table></figure></li>
<li><p>指定当前显示链接的位置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.location.href= <span class="string">"URL "</span></span><br></pre></td></tr></table></figure></li>
<li><p>取出窗体中的所有表单的数量 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.forms.length</span><br></pre></td></tr></table></figure></li>
<li><p>关闭文档的输出流 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.close();</span><br></pre></td></tr></table></figure></li>
<li><h1 id="字符串追加连接符"><a href="#字符串追加连接符" class="headerlink" title="字符串追加连接符 : "></a>字符串追加连接符 : </h1></li>
<li><p>创建一个文档元素 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.createElement(),<span class="built_in">document</span>.createTextNode()</span><br></pre></td></tr></table></figure></li>
<li><p>得到元素的方法 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById()</span><br></pre></td></tr></table></figure></li>
<li><p>设置表单中所有文本型的成员的值为空 : </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> form = <span class="built_in">window</span>.document.forms[<span class="number">0</span>] </span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt;form.elements.length;i )&#123; </span><br><span class="line">    <span class="keyword">if</span> (form.elements.type == <span class="string">"text "</span>)&#123; </span><br><span class="line">        form.elements.value = <span class="string">" "</span>; </span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>复选按钮在 JS中判定是否选中:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.forms[<span class="number">0</span>].checkThis.checked (checked 属性代表为</span><br><span class="line">是否选中返回 TRUE 或 FALSE)</span><br></pre></td></tr></table></figure>
</li>
<li><p>单 选 按 钮 组 ( 单 选 按 钮 的 名 称 必 须 相 同 ): </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 取 单 选 按 钮 组 的 长 度</span></span><br><span class="line"><span class="built_in">document</span>.forms[<span class="number">0</span>].groupName.length</span><br></pre></td></tr></table></figure></li>
<li><p>单选按钮组判定是否被选中也是用 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">checked.</span><br></pre></td></tr></table></figure></li>
<li><p>下拉列表框的值 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.forms[<span class="number">0</span>].selectName.options[n].value</span><br><span class="line"><span class="comment">// (n 有时用下拉列表框名称加上 .selectedIndex 来確定被选中的值 ) </span></span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string">35. 字符串的定义 :</span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>JavaScript</span><br><span class="line"><span class="keyword">var</span> myString = <span class="keyword">new</span> <span class="built_in">String</span>( <span class="string">"This is lightsword "</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>字符串转成大写 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.toUpperCase(); 字符串转成小写 :string.toLowerCase();</span><br></pre></td></tr></table></figure></li>
<li><p>返回字符串 2 在字符串 1 中出现的位置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">String1.indexOf( <span class="string">"String2 "</span>)!=<span class="number">-1</span> 则说明没找到 .</span><br></pre></td></tr></table></figure></li>
<li><p>取字符串中指定位置的一个字符 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">StringA.charAt(<span class="number">9</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>取出字符串中指定起点和终点的子字符串 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringA.substring(<span class="number">2</span>,<span class="number">6</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>数学函数 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.PI( 返回圆周率 ),</span><br><span class="line"><span class="built_in">Math</span>.SQRT2( 返回开方 ),</span><br><span class="line"><span class="built_in">Math</span>.max(value1,value2) 返回两个数中的最大值 ,</span><br><span class="line"><span class="built_in">Math</span>.pow(value1,<span class="number">10</span>) 返回value1 的十次方 ,</span><br><span class="line"><span class="built_in">Math</span>.round(value1) 四舍五入函数 ,</span><br><span class="line"><span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(n <span class="number">1</span>))返回隨机数</span><br></pre></td></tr></table></figure></li>
<li><p>定义日期型变量 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> today = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br></pre></td></tr></table></figure></li>
<li><p>日期函数列表 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">dateObj.getTime() 得到时间 ,</span><br><span class="line">dateObj.getYear() 得到年份 ,</span><br><span class="line">dateObj.getFullYear()得到四位的年份 ,</span><br><span class="line">dateObj.getMonth() 得到 月 份 ,</span><br><span class="line">dateObj.getDate() 得 到 日 ,</span><br><span class="line">dateObj.getDay() 得 到 日 期 几 ,</span><br><span class="line">dateObj.getHours() 得 到 小时,</span><br><span class="line">dateObj.getMin.utes() 得到分 ,</span><br><span class="line">dateObj.getSeconds() 得 到 秒 ,</span><br><span class="line">dateObj.setTime(value) 设 置 时 间 ,</span><br><span class="line">dateObj.setYear(val) 设 置年,</span><br><span class="line">dateObj.setMonth(val) 设置月 ,</span><br><span class="line">dateObj.setDate(val) 设 置 日 ,</span><br><span class="line">dateObj.setDay(val) 设 置 星 期 几 ,</span><br><span class="line">dateObj.setHours 设 置 小时,</span><br><span class="line">dateObj.setMinutes(val) 设置分,</span><br><span class="line">dateObj.setSeconds(val)设置秒 [注重 :此日期时间从 <span class="number">0</span> 开始计 ]</span><br></pre></td></tr></table></figure></li>
<li><p>FRAME 的 表 示 方 式 : </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[<span class="built_in">window</span>.]frames[n].ObjFuncVarName,</span><br><span class="line">frames[ <span class="string">"frameName "</span>].ObjFuncVarName,</span><br><span class="line">frameName.ObjFuncVarName</span><br></pre></td></tr></table></figure></li>
<li><p>parent 代表父亲对象 ,top 代表最顶端对象</p>
</li>
<li><p>打开子窗口的父窗口为 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">opener</span><br></pre></td></tr></table></figure></li>
<li><p>表示当前所属的位置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span></span><br></pre></td></tr></table></figure></li>
<li><p>当在超链接中调用 JS 函数时用 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(javascript :) 来开头后面加函数名</span><br></pre></td></tr></table></figure></li>
<li><p>在老的浏览器中不执行此 JS: &lt;!– //– &gt; </p>
</li>
<li><p>引用一个文件式的 JS: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type= <span class="string">"text/javascript "</span> src= <span class="string">"aaa.js "</span> &gt; &lt;<span class="regexp">/script &gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>指定在不支持脚本的浏览器显示的 HTML: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;noscript &gt; &lt;<span class="regexp">/noscript &gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>当超链和 onCLICK 事件都有时,<br>则老版本的浏览器转向 a.html,<br>否则转向 b.html. 例:<a href="a.html" >dfsadf </a > </p>
</li>
<li><p>JS 的內建对象有 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>,<span class="built_in">Boolean</span>,<span class="built_in">Date</span>,<span class="built_in">Error</span>,<span class="built_in">EvalError</span>,<span class="built_in">Function</span>,<span class="built_in">Math</span>,</span><br><span class="line"><span class="built_in">Number</span>,<span class="built_in">Object</span>,<span class="built_in">RangeError</span>,<span class="built_in">ReferenceError</span>,</span><br><span class="line"><span class="built_in">RegExp</span>,<span class="built_in">String</span>,<span class="built_in">SyntaxError</span>,<span class="built_in">TypeError</span>,<span class="built_in">URIError</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的换行 :&#92;n ‘</p>
</li>
<li><p>窗口全屏大小 : </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fullScreen</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">    <span class="keyword">this</span>.moveTo(<span class="number">0</span>,<span class="number">0</span>);</span><br><span class="line">    <span class="keyword">this</span>.outerWidth=screen.availWidth;</span><br><span class="line">    <span class="keyword">this</span>.outerHeight=screen.availHeight;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">window</span>.maximize=fullScreen;</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的 all 代表其下层的全部元素</p>
</li>
<li><p>JS 中的焦点顺序 :document.getElementByid( “ 表单元素 “).tabIndex = 1 </p>
</li>
<li><p>innerHTML 的值是表单元素的值 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如 </span></span><br><span class="line">&lt;p id= <span class="string">"para"</span>&gt; <span class="string">"how are &lt;em&gt;you&lt;/em&gt; "</span> &lt;<span class="regexp">/p&gt;, </span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 则innerHTML 的值就是 :how are &lt;em &gt;you &lt;/</span>em &gt;</span><br></pre></td></tr></table></figure></li>
<li><p>innerTEXT 的值和上面的一样 ,只不过不会把 <em >这种標记显示出来 . </p>
</li>
<li><p>contentEditable 可设置元素是否可被修改 ,isContentEditable 返回是否可修改的状態 . </p>
</li>
<li><p>isDisabled 判定是否为禁止状態 .disabled 设置禁止状態</p>
</li>
<li><p>length 取得长度 ,返回整型数值</p>
</li>
<li><p>addBehavior() 是一种 JS调用的外部函数文件其扩展名为 .htc </p>
</li>
<li><p>window.focus() 使当前的窗口在所有窗口之前 . </p>
</li>
<li><p>blur() 指失去焦点 .与 FOCUS() 相反 . </p>
</li>
<li><p>select()指元素为选中状態 . </p>
</li>
<li><p>防止用户对文本框中输入文本 : </p>
</li>
<li><p>取出该元素在页面中出现的数量 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.all.tags( <span class="string">"div( 或其它 HTML 標记符 ) "</span>).length</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中 分 为 两 种 窗 体 输 出 : </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 模態和非模態.</span></span><br><span class="line"><span class="built_in">window</span>.showModaldialog(),<span class="built_in">window</span>.showModeless()</span><br></pre></td></tr></table></figure></li>
<li><p>状 態 栏 文 字 的 设 置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.status= &amp;apos; </span><br><span class="line"><span class="comment">// 文 字 &amp;apos;, 默 认 的 状 態 栏 文 字 设置:</span></span><br><span class="line"><span class="built_in">window</span>.defaultStatus = &amp;apos; 文字 . &amp;apos;;</span><br></pre></td></tr></table></figure></li>
<li><p>添加到收藏夹 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">external.AddFavorite( <span class="string">"http://www.dannyg.com "</span>;, <span class="string">"jaskdlf "</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中碰到脚本错误时不做任何操作 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onerror = doNothing; <span class="comment">//指定错误句柄的语法为 :</span></span><br><span class="line"><span class="built_in">window</span>.onerror = handleError;</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中指定当前打开窗口的父窗口 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.opener, <span class="comment">//支持 opener.opener...的多重继续 .</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的 self 指的是当前的窗口</p>
</li>
<li><p>JS 中状態栏显示內容 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.status= <span class="string">" 內容 "</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的 top 指的是框架集中最顶层的框架</p>
</li>
<li><p>JS 中关闭当前的窗口 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.close();</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中提出是否確认的框 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(confirm( <span class="string">"Are you sure? "</span>))&#123;</span><br><span class="line">    alert( <span class="string">"ok "</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    alert( <span class="string">"Not Ok "</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的窗口重定向 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.navigate( <span class="string">"http://www.sina.com.cn "</span>;);</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的打印 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.print()</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的提示输入框 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.prompt( <span class="string">"message "</span>, <span class="string">"defaultReply "</span>);</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的窗口滚动条 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.scroll(x,y)</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的窗口滚动到位置 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.scrollby</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中设置时间间隔 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">setInterval( <span class="string">"expr "</span>,msecDelay) </span><br><span class="line"><span class="comment">// 或 setInterval(funcRef,msecDelay) 或setTimeout</span></span><br></pre></td></tr></table></figure></li>
<li><p>JS 中 的 模 態 显 示 在 IE4 行 , 在 NN 中 不 行 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">showModalDialog( <span class="string">"URL "</span>[,<span class="built_in">arguments</span>][,features]);</span><br></pre></td></tr></table></figure></li>
<li><p>JS 中的退出之前使用的句柄 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">verifyClose</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    event.returnValue= <span class="string">"we really like you and hope you will stay longer. "</span>;&#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="built_in">window</span>.=verifyClose;</span><br></pre></td></tr></table></figure></li>
<li><p>当窗体第一次调用时使用的文件句柄 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">onload()</span><br></pre></td></tr></table></figure></li>
<li><p>当窗体关闭时调用的文件句柄 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">onunload()</span><br></pre></td></tr></table></figure></li>
<li><p>window.location 的 属 性 : </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">protocol(http:),</span><br><span class="line">hostname(www.example.com),</span><br><span class="line">port(<span class="number">80</span>),</span><br><span class="line">host(www.example.com:<span class="number">80</span>),</span><br><span class="line">pathname ( <span class="string">"/a/a.html "</span>),</span><br><span class="line">hash( <span class="string">"#giantGizmo "</span>, 指跳转到相应的锚记 ),</span><br><span class="line">href( 全部的信息 )</span><br></pre></td></tr></table></figure></li>
<li><p>window.location.reload() 刷新当前页面 . </p>
</li>
<li><p>window.history.back() 返 回 上 一 页 ,<br>window.history.forward() 返 回 下 一页,<br>window.history.go( 返回第几页 ,也可以使用访问过的 URL) </p>
</li>
<li><p>document.write() 不换行的输出 ,<br>document.writeln() 换行输出</p>
</li>
<li><p>document.body.noWrap=true; 防止链接文字折行 . </p>
</li>
<li><p>变量名 .charAt( 第几位 ),取该变量的第几位的字符 . </p>
</li>
<li><p>“abc “.charCodeAt( 第几个 ),返回第几个字符的 ASCii 码值 . </p>
</li>
<li><p>字符串连接 :</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.concat(string2), 或用 =进行连接</span><br></pre></td></tr></table></figure></li>
<li><p>变量.indexOf( “ 字符 “,起始位置 ),返回第一个出现的位置 (从 0 开始计算 ) </p>
</li>
<li><p>string.lastIndexOf(searchString[,startIndex]) 最后一次出现的位置 . </p>
</li>
<li><p>string.match(regExpression), 判定字符是否匹配 . </p>
</li>
<li><p>string.replace(regExpression,replaceString) 替换现有字符串 . </p>
</li>
<li><p>string.split( 分隔符 )返回一个数组存储值 . </p>
</li>
<li><p>string.substr(start[,length]) 取从第几位到指定长度的字符串 . </p>
</li>
<li><p>string.toLowerCase() 使字符串全部变为小写 . </p>
</li>
<li><p>string.toUpperCase() 使全部字符变为大写 . </p>
</li>
<li><p>parseInt(string[,radix( 代表进制 )]) 强制转换成整型 . </p>
</li>
<li><p>parseFloat(string[,radix]) 强制转换成浮点型 . </p>
</li>
<li><p>isNaN( 变量 ):测试是否为数值型 . </p>
</li>
<li><p>定义常量的要害字 :const,定义变量的要害字 :var </p>
</li>
</ol>

      
    </div>
    <div id="comments">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a style="word-wrap:break-word;" href="http://yoursite.com/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/" title="JavaScript知识点回顾" target="_blank" rel="external">http://yoursite.com/2020/03/25/01/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E5%9B%9E%E9%A1%BE/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/chen08" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/chen08" target="_blank"><span class="text-dark">溟海</span><small class="ml-1x">Web Developer &amp; Designer</small></a></h3>
        <div>天行健，君子以自强不息，地势坤，君子以厚德载物。 杀不死我的,终将使我强大 没有吃不了的苦,只有享不了的福</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2020/03/25/01/nodeJs/egg%E5%AD%A6%E4%B9%A0/" title="egg学习"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;Newer</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2020/03/23/06/%E4%BA%BA%E7%94%9F%E6%95%88%E7%8E%87%E6%89%8B%E5%86%8C/" title="人生效率手册"><span>Older&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
    <li class="toggle-toc">
      <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="Catalogue" role="button">
        <span>[&nbsp;</span><span>Catalogue</span>
        <i class="text-collapsed icon icon-anchor"></i>
        <i class="text-in icon icon-close"></i>
        <span>]</span>
      </a>
    </li>
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>$</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>Maybe you could buy me a cup of coffee.</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open alipay app scan this qrcode, buy me a coffee!</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open wechat app scan this qrcode, buy me a coffee!</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> alipay</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> wechat payment</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   


<!-- custom analytics part create by xiamo -->
<script  src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
<!-- <script defer src="/js/av-min-1.2.1.js"></script> -->
<script >
AV.init({
  appId: 'ngFQzHw7z0HgQfrtn4En4WTN-gzGzoHsz',
  appKey: 'W9hgBBfVDwRGJKoGp5a6HKpx'
});

function showTime(Counter) {
	var query = new AV.Query(Counter);
		var visitors= $('.leancloud_visitors');
		query.greaterThanOrEqualTo("time", 0);		
		query.find({
			success: function(results) {
				if (results.length == 0) {				
					return;
				}
				var data = results;
				visitors.each(function(){
					var url = $(this).attr('id').trim();					
					for (var i = 0; i < data.length; i++) {
						var object = data[i];
						var content = object.get('time');
						var _url = object.get('url')
						if(url == _url){
							$(this).text(content);
						}
					}
				})
				
			},
			error: function(object, error) {
				console.log("Error: " + error.code + " " + error.message);
			}
		});
}

function addCount(Counter) {
	var Counter = AV.Object.extend("Counter");
	url = $(".leancloud_visitors").attr('id').trim();
	title = $(".leancloud_visitors").attr('data-flag-title').trim();
	var query = new AV.Query(Counter);
	query.equalTo("url", url);
	query.find({
		success: function(results) {
			if (results.length > 0) {
				var counter = results[0];
				counter.fetchWhenSave(true);
				counter.increment("time");
				counter.save(null, {
					success: function(counter) {
						var content = counter.get('time');
						$(document.getElementById(url)).text(content);
					},
					error: function(counter, error) {
						console.log('Failed to save Visitor num, with error message: ' + error.message);
					}
				});
			} else {
				var newcounter = new Counter();
				newcounter.set("title", title);
				newcounter.set("url", url);
				newcounter.set("time", 1);
				newcounter.save(null, {
					success: function(newcounter) {
					    console.log("newcounter.get('time')="+newcounter.get('time'));
						var content = newcounter.get('time');
						$(document.getElementById(url)).text(content);
					},
					error: function(newcounter, error) {
						console.log('Failed to create');
					}
				});
			}
		},
		error: function(error) {
			console.log('Error:' + error.code + " " + error.message);
		}
	});
}
$(function() {
	var Counter = AV.Object.extend("Counter");
	if ($('.leancloud_visitors').length == 1) {
		addCount(Counter);
	} else {
		showTime(Counter);
	}
}); 
</script>



   
    
  <!-- <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> -->
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>